@charset "UTF-8";
/* ============================================================================
 * tokens.css
 * COLAVIA v1.000.0000
 *
 *   デザイントークン（配色・角丸・影・余白）。
 *
 *   **配色の切り替えはこのファイルだけで行う**（§6.4）。
 *   他の CSS では色コードを直接書かない（§6.2）。
 *   ダークの変数は次の2か所に定義する。
 *     @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }
 *     :root[data-theme="dark"]
 *
 *   出所: mock/css/common.css（ワイヤーフレームモックの共通スタイル）から
 *         該当部分を切り出したもの。§3.4 のディレクトリ構成に合わせて
 *         reset / tokens / base / layout / components の5本に分けている。
 *
 *   読み込む順序に意味がある（app_shell.php を参照）
 *     reset → tokens → base → layout → components → css/views/*.css
 * ========================================================================== */

:root {
  /* ブランド色（ロゴマーク）
     3案を用意し、切り替えられるようにしている。
       A 藍→青緑（既定）  B 深緑→青緑  C 紫→青 */
  --brand-from: #4C6FFF;
  --brand-to:   #0FA8C8;
  --brand-ink:  #ffffff;

  /* 面 */
  --c-window-bg:      #f5f5f7;
  --c-surface:        #ffffff;
  --c-surface-sunken: #fbfbfd;
  --c-chrome-bg:      rgba(250, 250, 252, 0.72);
  --c-popover-bg:     rgba(252, 252, 254, 0.85);

  /* 文字 */
  --c-text:           #1d1d1f;
  --c-text-secondary: #6e6e73;
  --c-text-tertiary:  #a1a1a6;
  --c-text-on-accent: #ffffff;

  /* 境界・塗り（半透明グレーで下地を透かす） */
  --c-hairline:       rgba(0, 0, 0, 0.10);
  --c-separator:      rgba(0, 0, 0, 0.06);
  --c-fill:           rgba(120, 120, 128, 0.12);
  --c-fill-hover:     rgba(120, 120, 128, 0.20);
  --c-fill-active:    rgba(120, 120, 128, 0.28);

  /* アクセント */
  --c-accent:         #007aff;
  --c-accent-hover:   #0069d9;
  --c-accent-active:  #0059b8;
  --c-accent-soft:    rgba(0, 122, 255, 0.12);
  --c-focus-ring:     rgba(0, 122, 255, 0.45);

  /* 状態色 */
  --c-red:            #ff3b30;
  --c-orange:         #ff9500;
  --c-yellow:         #ffcc00;
  --c-yellow-deep:    #b07d00;   /* 文字色として使う濃い黄（黄は淡く可読性が落ちるため） */
  --c-green:          #34c759;
  --c-blue:           #007aff;
  --c-purple:         #af52de;
  --c-gray:           #8e8e93;

  /* 優先度 */
  --c-priority-low:    var(--c-gray);
  --c-priority-normal: var(--c-blue);
  --c-priority-high:   var(--c-orange);
  --c-priority-urgent: var(--c-red);

  /* 土日・祝日の下地 */
  --c-sat:  rgba(0, 122, 255, 0.05);
  --c-sun:  rgba(255, 59, 48, 0.05);
  --c-hol:  rgba(255, 59, 48, 0.08);

  /* 角丸 */
  --r-xs:   0.375rem;
  --r-sm:   0.5rem;
  --r-md:   0.75rem;
  --r-lg:   0.875rem;
  --r-xl:   1.125rem;
  --r-full: 62.5rem;

  /* 影 */
  --shadow-card:  0 0.0625rem 0.125rem rgba(0, 0, 0, 0.04);
  --shadow-drag:  0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
  --shadow-popup: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.16),
                  0 0 0 0.0625rem rgba(0, 0, 0, 0.05);

  /* 余白 */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;

  /* タイポグラフィ */
  --font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", "Meiryo", sans-serif;
  --fs-xs:   0.6875rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --lh-tight: 1.3;
  --lh-base:  1.7;

  /* 寸法 */
  --h-header:  3.25rem;
  --h-control: 2rem;
  --h-tap:     2.75rem;
  --w-content: 84rem;
  --w-menu:    13.5rem;

  /* ガントチャートの寸法（JS からも参照するため rem ではなく実寸で扱う） */
  --gantt-day-w:  2.25rem;   /* 1日あたりの幅 */
  --gantt-row-h:  2.5rem;    /* 1行の高さ */
  --gantt-side-w: 17rem;     /* 左側のタスク名列の幅 */

  /* モーション */
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.18s;
}

/* ダークモードの配色
 * 既定は OS 設定に追従し、ヘッダの設定メニューで明示的に固定もできる。
 *   data-theme なし      … OS 設定に追従（自動）
 *   data-theme="light"   … ライト固定（下のメディアクエリを無効化する）
 *   data-theme="dark"    … ダーク固定
 */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-window-bg:      #1c1c1e;
    --c-surface:        #2c2c2e;
    --c-surface-sunken: #242426;
    --c-chrome-bg:      rgba(38, 38, 41, 0.72);
    --c-popover-bg:     rgba(48, 48, 51, 0.85);

    --c-text:           #f5f5f7;
    --c-text-secondary: #98989d;
    --c-text-tertiary:  #6e6e73;

    --c-hairline:       rgba(255, 255, 255, 0.13);
    --c-separator:      rgba(255, 255, 255, 0.08);
    --c-fill:           rgba(120, 120, 128, 0.24);
    --c-fill-hover:     rgba(120, 120, 128, 0.34);
    --c-fill-active:    rgba(120, 120, 128, 0.44);

    --c-accent:         #0a84ff;
    --c-accent-hover:   #3395ff;
    --c-accent-active:  #4da2ff;
    --c-accent-soft:    rgba(10, 132, 255, 0.22);
    --c-focus-ring:     rgba(10, 132, 255, 0.55);

    --c-red:            #ff453a;
    --c-orange:         #ff9f0a;
    --c-yellow:         #ffd60a;
    --c-yellow-deep:    #ffd60a;
    --c-green:          #30d158;
    --c-blue:           #0a84ff;
    --c-purple:         #bf5af2;
    --c-gray:           #98989d;

    --c-sat: rgba(10, 132, 255, 0.09);
    --c-sun: rgba(255, 69, 58, 0.09);
    --c-hol: rgba(255, 69, 58, 0.14);

    --shadow-card:  0 0.0625rem 0.125rem rgba(0, 0, 0, 0.30);
    --shadow-drag:  0 0.5rem 1.25rem rgba(0, 0, 0, 0.50);
    --shadow-popup: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.50),
                    0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="dark"] {
    --c-window-bg:      #1c1c1e;
    --c-surface:        #2c2c2e;
    --c-surface-sunken: #242426;
    --c-chrome-bg:      rgba(38, 38, 41, 0.72);
    --c-popover-bg:     rgba(48, 48, 51, 0.85);

    --c-text:           #f5f5f7;
    --c-text-secondary: #98989d;
    --c-text-tertiary:  #6e6e73;

    --c-hairline:       rgba(255, 255, 255, 0.13);
    --c-separator:      rgba(255, 255, 255, 0.08);
    --c-fill:           rgba(120, 120, 128, 0.24);
    --c-fill-hover:     rgba(120, 120, 128, 0.34);
    --c-fill-active:    rgba(120, 120, 128, 0.44);

    --c-accent:         #0a84ff;
    --c-accent-hover:   #3395ff;
    --c-accent-active:  #4da2ff;
    --c-accent-soft:    rgba(10, 132, 255, 0.22);
    --c-focus-ring:     rgba(10, 132, 255, 0.55);

    --c-red:            #ff453a;
    --c-orange:         #ff9f0a;
    --c-yellow:         #ffd60a;
    --c-yellow-deep:    #ffd60a;
    --c-green:          #30d158;
    --c-blue:           #0a84ff;
    --c-purple:         #bf5af2;
    --c-gray:           #98989d;

    --c-sat: rgba(10, 132, 255, 0.09);
    --c-sun: rgba(255, 69, 58, 0.09);
    --c-hol: rgba(255, 69, 58, 0.14);

    --shadow-card:  0 0.0625rem 0.125rem rgba(0, 0, 0, 0.30);
    --shadow-drag:  0 0.5rem 1.25rem rgba(0, 0, 0, 0.50);
    --shadow-popup: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.50),
                    0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
}



/* ---- モーダルの影 --------------------------------------------------------
   components.css で使うが、影も配色と同じくここに集約する（§6.2）。
   ------------------------------------------------------------------------ */
:root { --shadow-modal: 0 1.5rem 4rem rgba(0, 0, 0, 0.28), 0 0 0 0.0625rem rgba(0, 0, 0, 0.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-modal: 0 1.5rem 4rem rgba(0, 0, 0, 0.65), 0 0 0 0.0625rem rgba(255, 255, 255, 0.10); }
}
:root[data-theme="dark"] { --shadow-modal: 0 1.5rem 4rem rgba(0, 0, 0, 0.65), 0 0 0 0.0625rem rgba(255, 255, 255, 0.10); }