/* ==========================================================================
   バリューボックス デザインシステム — 基礎トークン（tokens.css）
   値の置き場だけ。部品の見た目は base.css、画面の枠は layout.css。
   出どころ：dropwork のデザインシステム（業務の段）ds-tokens.css を土台に、
   主色を紫にした（plan.md 2026-10-21 オーナー決定）。ゲーム系の値（金・称号・
   分類カテゴリ色・通知カテゴリ色・光沢・弾む動き）は持ち込まない。
   命名：すべて --vb- 接頭辞。
   ========================================================================== */

:root {
  /* ---- 主色（紫） ------------------------------------------------------- */
  --vb-primary: #9055fd;          /* 線・塗り・リンク・現在地の印 */
  --vb-primary-strong: #7e3ff2;   /* 白い文字が載る面（主ボタン・現在地の塗り）と押した時（白文字 5.4:1） */
  --vb-primary-press: #6a2fdc;    /* 主ボタンを押している間 */
  --vb-primary-soft: #f2ebff;     /* 選んだ物の淡い面 */
  --vb-primary-soft-2: #e6dafe;   /* 淡い面の上でマウスを載せた時・淡い枠 */
  --vb-primary-ink: #6d3bd1;      /* 淡い面の上の文字（#f2ebff の上で 5.6:1） */
  --vb-primary-ring: rgba(144, 85, 253, 0.35); /* フォーカスの輪 */
  --vb-primary-grad: linear-gradient(90deg, #7e3ff2 0%, #9a63ff 100%);

  /* ---- 焦点（フォーカス）の輪（決定 52・shadcn/ui と同じ考え方） ----------
     輪は外側に 1 つだけ（太さ 3px・主色の 35%）。入力欄は枠の色を主色にして輪を足す（枠の太さは変えない）。
     押す物はキーボードの焦点（:focus-visible）の時だけ輪。中に入力欄を抱えた箱は箱だけに輪（中の欄は何も足さない）。
     焦点の見た目はこの値だけで書く（tests/V2FocusRingCssTest.php が直に色・影・outline を書いた所を落とす） */
  --vb-ring-width: 3px;
  --vb-ring: var(--vb-primary-ring);
  --vb-ring-danger: rgba(224, 56, 62, 0.25);
  --vb-ring-warning: rgba(228, 138, 0, 0.25);
  --vb-focus-line: var(--vb-primary);           /* 焦点の時の入力欄の枠の色 */
  --vb-focus-ring: 0 0 0 var(--vb-ring-width) var(--vb-ring);
  --vb-focus-ring-danger: 0 0 0 var(--vb-ring-width) var(--vb-ring-danger);
  --vb-focus-ring-warning: 0 0 0 var(--vb-ring-width) var(--vb-ring-warning);
  --vb-focus-outline: var(--vb-ring-width) solid var(--vb-ring);   /* 既定（:focus-visible）と表の行。outline は角丸に沿い、部品の影を消さない */
  --vb-focus-ring-inset:inset 0 0 0 var(--vb-ring-width) var(--vb-ring);   /* 外へ出すと隣に隠れる物（表の行・横に並ぶ帯） */
  --vb-focus-ring-gap: 0 0 0 2px #fff, 0 0 0 calc(2px + var(--vb-ring-width)) var(--vb-ring);   /* 色の面の上の小さな物（ガントの帯・節目）。白の隙間を挟む */
  --vb-field-line-w: 1.5px;                      /* 入力欄の枠（内側の線）の太さ。焦点でも変えない */
  --vb-field-line: inset 0 0 0 var(--vb-field-line-w) var(--vb-line-strong);   /* 入力欄のふだんの枠（箱の中の欄が焦点でも変えない時に使う） */
  --vb-focus-field:inset 0 0 0 var(--vb-field-line-w) var(--vb-focus-line), var(--vb-focus-ring);
  --vb-focus-field-danger: inset 0 0 0 var(--vb-field-line-w) var(--vb-danger), var(--vb-focus-ring-danger);

  /* ---- 地と面 ----------------------------------------------------------- */
  --vb-bg: #f4f1fc;               /* 紫寄りの淡い地 */
  --vb-bg-2: #ece7fa;             /* 地の右下（グラデーションの終わり） */
  --vb-bg-grad:
    radial-gradient(1200px 520px at 100% -8%, rgba(208, 186, 252, 0.55), transparent 62%),
    radial-gradient(900px 600px at 10% 110%, rgba(226, 214, 252, 0.7), transparent 60%),
    linear-gradient(180deg, #f8f6fe 0%, #f4f1fc 45%, #ece7fa 100%);
  --vb-surface: rgba(255, 255, 255, 0.8); /* 白いカード（半透明＝ガラスの面） */
  --vb-surface-solid: #ffffff;
  --vb-surface-head: rgba(255, 255, 255, 0.96); /* ページ見出しのカード */
  --vb-panel-blur: blur(14px) saturate(1.2);
  --vb-surface-2: #f8f7fc;        /* カードの中の一段沈んだ面（表の見出し・合計の行） */
  --vb-surface-3: #f1f0f7;        /* 灰の面（無効・骨組み） */

  /* ---- 文字（紺） ------------------------------------------------------- */
  --vb-ink: #1a2b5c;              /* 見出し・本文 */
  --vb-ink-2: #3d4d78;            /* 本文の 2 段目・表の中身 */
  --vb-ink-3: #5b6990;            /* 補足・列名・時刻（白 5.4:1） */
  --vb-ink-4: #98a4c0;            /* 入力の placeholder・無効の文字（意味を持たせない） */
  --vb-ink-inverse: #ffffff;

  /* ---- 線 --------------------------------------------------------------- */
  --vb-line: rgba(26, 43, 92, 0.08);
  --vb-line-2: rgba(26, 43, 92, 0.12);
  --vb-line-strong: rgba(26, 43, 92, 0.18);
  --vb-control-line: #c9cee0;     /* 入力欄の枠 */
  --vb-control-line-hover: #a9b0cb;
  --vb-check-line: #7a86a6;       /* チェック枠（白地で 3:1 以上） */

  /* ---- 行の状態（決定 9：選んだ行とマウスの行を同じ色にしない） -------- */
  --vb-row-hover: #f6f6fa;        /* マウスを載せた行＝淡い灰 */
  --vb-row-selected: var(--vb-primary-soft); /* 選んだ行＝淡い紫＋左に紫の線 */

  /* ---- 状態色（5 つ。青は「情報」だけ） --------------------------------- */
  --vb-info: #2f6bf0;      --vb-info-bg: #e4edfd;    --vb-info-ink: #2456c9;
  --vb-success: #2eb872;   --vb-success-bg: #e3f6ec; --vb-success-ink: #17774a;
  --vb-warning: #e48a00;   --vb-warning-bg: #fff1d9; --vb-warning-ink: #8f5200;
  --vb-danger: #e0383e;    --vb-danger-bg: #fde8e8;  --vb-danger-ink: #c62a30;
  --vb-neutral: #56648a;   --vb-neutral-bg: #eceff6; --vb-neutral-ink: #4a5778;
  --vb-danger-strong: #c62a30; /* 危険ボタンの面（白文字 5.5:1） */
  --vb-star: #d97706;      /* 重要度の星（濃い橙。金にしない） */

  /* ---- ラベルの 8 色（決定 4：淡い地＋濃い点） -------------------------- */
  --vb-label-purple-bg: #f2ebff; --vb-label-purple: #8a4cf7;
  --vb-label-blue-bg: #e6eefe;   --vb-label-blue: #3b6fe0;
  --vb-label-teal-bg: #ddf4f3;   --vb-label-teal: #12938f;
  --vb-label-green-bg: #e3f5e9;  --vb-label-green: #2c9a5b;
  --vb-label-yellow-bg: #fdf4d6; --vb-label-yellow: #c58f05;
  --vb-label-orange-bg: #feecdf; --vb-label-orange: #df6b1d;
  --vb-label-pink-bg: #fde7f1;   --vb-label-pink: #d43f86;
  --vb-label-gray-bg: #eef0f5;   --vb-label-gray: #6b7591;

  /* ---- 書体（font ショートハンド：太さ 大きさ/行の高さ 書体） ---------- */
  --vb-font: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --vb-font-mono: "SFMono-Regular", "Consolas", "Noto Sans Mono CJK JP", "Menlo", monospace;
  --vb-text-display: 800 32px/1.25 var(--vb-font);
  --vb-text-h1: 800 26px/1.3 var(--vb-font);     /* 画面の題名 */
  --vb-text-h2: 800 20px/1.35 var(--vb-font);    /* 節 */
  --vb-text-h3: 700 16px/1.4 var(--vb-font);     /* カードの見出し */
  --vb-text-h4: 700 14px/1.45 var(--vb-font);    /* 小見出し */
  --vb-text-body-lg: 500 17px/1.6 var(--vb-font);
  --vb-text-body: 400 16px/1.6 var(--vb-font);   /* 本文の基本（2026-10-28・決定 63） */
  --vb-text-table: 500 16px/1.5 var(--vb-font); /* 表の中身（本文と同じ 16px・決定 63） */
  --vb-text-sm: 500 14px/1.5 var(--vb-font);     /* 補足・2 行目（本文 16px の 1 段下・決定 64） */
  --vb-text-caption: 500 12.5px/1.45 var(--vb-font);   /* 注記・札・時刻（決定 64） */
  --vb-text-micro: 700 10.5px/1.3 var(--vb-font);
  --vb-text-num-lg: 800 28px/1.15 var(--vb-font); /* 数字の枠 */

  /* ---- 余白（4px 基準） -------------------------------------------------- */
  --vb-space-0: 2px;
  --vb-space-1: 4px;
  --vb-space-2: 8px;
  --vb-space-3: 12px;
  --vb-space-4: 16px;
  --vb-space-5: 20px;
  --vb-space-6: 24px;
  --vb-space-7: 32px;
  --vb-space-8: 40px;
  --vb-space-9: 56px;
  --vb-space-10: 72px;

  /* ---- 角丸 -------------------------------------------------------------- */
  --vb-radius-xs: 8px;    /* 札・小さなボタン・入力の中の物 */
  --vb-radius-sm: 12px;   /* ボタン・入力欄・メニュー */
  --vb-radius-md: 16px;   /* 小さなカード・パネルの中の区画 */
  --vb-radius-card: 16px; /* 白いカード */
  --vb-radius-lg: 22px;   /* ダイアログ・横のパネル */
  --vb-radius-pill: 999px;

  /* ---- 影（業務の 5 段。紫寄りの影） ----------------------------------- */
  --vb-shadow-flat: 0 1px 2px rgba(40, 30, 90, 0.06);
  --vb-shadow-card: 0 6px 18px rgba(76, 52, 160, 0.07), 0 1px 2px rgba(76, 52, 160, 0.05);
  --vb-shadow-panel: 0 10px 30px rgba(76, 52, 160, 0.10), 0 2px 6px rgba(76, 52, 160, 0.05);
  --vb-shadow-lift: 0 18px 40px rgba(76, 52, 160, 0.16), 0 4px 10px rgba(76, 52, 160, 0.08);
  --vb-shadow-menu: 0 4px 12px rgba(76, 52, 160, 0.10), 0 1px 3px rgba(76, 52, 160, 0.06);   /* 左ナビで重ねる物（右に出す一覧・自分のメニュー・引き出し）。shadcn の popover と同じ控えめな 1 種 */
  --vb-shadow-modal: 0 30px 70px rgba(20, 16, 60, 0.26), 0 10px 24px rgba(20, 16, 60, 0.12);
  --vb-shadow-primary: 0 6px 16px rgba(126, 63, 242, 0.28);
  --vb-shadow-panel-edge: var(--vb-shadow-panel), inset 0 0 0 1px rgba(255, 255, 255, 0.95);
  /* 4 主ボタンの面 */
  --vb-primary-btn-grad: linear-gradient(90deg, #7333ea 0%, #8a4cf7 100%);
  --vb-shadow-btn-primary: var(--vb-shadow-flat), inset 0 1px 0 rgba(255, 255, 255, 0.28);

  /* ---- 乙の機能アイコンの色（機能を表す所。押す操作は Lucide の線） ------ */
  --vb-icon-line: #1a2b5c;   /* 線 */
  --vb-icon-fill: #f2ebff;   /* 淡い面 */
  --vb-icon-accent: #9055fd; /* 差し色（1 か所だけ） */
  --vb-icon-bg: #ffffff;     /* 重なった部品の下地 */

  /* ---- 大きさ ------------------------------------------------------------ */
  --vb-hit: 44px;          /* 押せる範囲の最小 */
  --vb-control-h: 42px;    /* ボタン・入力の標準の高さ */
  --vb-control-h-sm: 32px; /* 小さいボタン・表の中の操作 */
  --vb-control-h-lg: 48px; /* スマホの主ボタン */
  --vb-icon: 18px;         /* ボタンの中のアイコン */
  --vb-icon-sm: 16px;
  --vb-icon-lg: 20px;      /* ナビ */
  --vb-row-h: 52px;        /* 表の行（標準） */
  --vb-row-h-dense: 36px;  /* 表の行（詰める） */

  /* ---- 画面の枠の幅（layout.css が使う） -------------------------------- */
  --vb-nav-w: 232px;       /* 左ナビ（文字つき） */
  --vb-rail-w: 68px;       /* 左ナビ（アイコンの列） */
  --vb-topbar-h: 64px;
  --vb-tabbar-h: 64px;     /* スマホの下のタブ */
  --vb-page-pad: 32px;     /* 本文の左右の余白（1440） */
  --vb-card-gap: 20px;     /* 本文の中のカードと段の縦の隙間（.vb-page の gap・詳細の左右の列と、1023 以下で縦に積んだ時の段の間）。767 以下は layout.css が 16px にする。どの隣り合うカードも 12px 未満にしない（decisions.md 53） */
  --vb-read-max: 720px;    /* 読み物（設定・ナレッジ）の最大幅 */
  --vb-panel-w: 560px;     /* 横から開くパネル（480〜640） */

  /* 幅の段（@media には数値を書き写す。custom property は条件に使えない）
     1440：左ナビ文字つき（1280 以上）
     1024：左ナビをアイコンの列に畳む＋上のバー（1024〜1279）
     768 ：左ナビは ≡ で引き出す（768〜1023）
     390 ：下のタブ 5 つ（767 以下） */
  --vb-bp-wide: 1440px;
  --vb-bp-rail: 1024px;
  --vb-bp-tablet: 768px;
  --vb-bp-phone: 390px;

  /* ---- 動き（quiet だけ） ---------------------------------------------- */
  --vb-dur-instant: 120ms;
  --vb-dur: 200ms;
  --vb-dur-slow: 320ms;
  --vb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- 重なり順（メニュー → 横のパネル → ダイアログ → トースト） -------- */
  --vb-z-sticky: 15;
  --vb-z-header: 25;
  --vb-z-nav: 30;
  --vb-z-menu: 40;
  --vb-z-panel: 45;
  --vb-z-scrim: 50;
  --vb-z-dialog: 51;
  --vb-z-toast: 55;
  --vb-z-tooltip: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vb-dur-instant: 0.01ms; --vb-dur: 0.01ms; --vb-dur-slow: 0.01ms; }
}