/*
  tokens.css — Git / GitHub 実務トレーニングサイトのデザイントークン

  ① これは何か: このサイトで使う色・文字・余白・角丸・影の CSS 変数定義。
  ② なぜここにあるか: ルートの design-system/ は「ルール（md）」だけで実装ファイル
     （assets/tokens.css）が控えに含まれていない。学習サイト自身が「既存 Design System に
     沿って作った HTML プロトタイプ」の実例になるよう、foundations/*.md に書かれた値だけで
     起こしたもの。値の正は design-system/foundations/（color.md / typography.md /
     spacing-shape.md）。ここに無い値は発明しない。
  ③ 運用上の前提: 16 進数・px を直接書くのはこのファイルの中だけ。他の CSS / HTML は
     必ず var(--...) 経由で参照する（design-system/DESIGN.md「やってはいけないこと」）。
  ④ 詳細: ../README.md「デザインルールの準拠と意図的な逸脱」
*/

:root {
  /* ---------- Typography (foundations/typography.md) ---------- */
  --font-sans: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  /* 逸脱: DS にコード表示用フォントの定義が無い。ターミナル・コード片の可読性のため
     システム等幅を使う（README に記録）。サイズは公式 6 段階の中から使う */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;

  --fw-regular: 400;
  --fw-bold: 700;

  --lh-title: 1.4;
  --lh-body: 1.6;
  --lh-note: 1.4;
  --lh-label: 1;

  --ls-title: 0.02em;

  /* ---------- BrandColors / smart blue（プライマリー） ---------- */
  --brand-smartblue-primary: #17A5FF;
  --brand-smartblue-secondary: #45B7FF;
  --brand-smartblue-tertiary: #A2DBFF;
  --brand-smartblue-background: #E8F6FF;

  /* BrandColors / sky（プライマリー・グラデーション） */
  --brand-sky-start: #027FFF;
  --brand-sky-end: #2CCBFF;
  --grad-hero: linear-gradient(194deg, var(--brand-sky-start), var(--brand-sky-end));

  /* ---------- SecondaryBrandColors / calm blue（UI の主力） ---------- */
  --brand-primary: #0274E8;
  --brand-secondary: #4AA0F7;
  --brand-tertiary: #AAD1FA;
  --brand-background: #E7F2FC;

  /* ---------- NeutralColors ---------- */
  --ink-000: #FFFFFF;
  --neutral-black: #000A1C;
  --neutral-black-80: rgba(0, 10, 28, 0.8);
  --neutral-black-40: rgba(0, 10, 28, 0.4);
  --neutral-gray-1: #F5F6F7;
  --neutral-gray-2: #E6E8EC;
  --neutral-gray-3: #CDD1D9;
  --neutral-gray-4: #9AA3B4;
  --neutral-gray-5: #68768E;
  --neutral-gray-6: #354869;
  --neutral-gray-7: #031A43;

  /* ---------- SemanticColors ---------- */
  --success-primary: #008085;
  --success-secondary: #5CE0E5;
  --success-tertiary: #91EFF2;
  --success-background: #E3F9FA;

  --warning-primary: #C19D1D;
  --warning-secondary: #FFD84C;
  --warning-tertiary: #FFE999;
  --warning-background: #FFFCD9;

  --error-primary: #C63636;
  --error-secondary: #FF5959;
  --error-tertiary: #FFA6A6;
  --error-background: #FFEDED;

  /* ---------- セマンティック（役割）トークン ---------- */
  --text-primary: var(--neutral-gray-7);     /* 見出し */
  --text-body: var(--neutral-gray-6);        /* 本文 */
  --text-secondary: var(--neutral-gray-5);   /* 補助テキスト（白地基準） */
  --text-placeholder: var(--neutral-gray-5);
  --text-disabled: var(--neutral-gray-4);
  --text-inverse: var(--ink-000);

  --bg-page: var(--ink-000);
  --bg-raised: var(--neutral-gray-1);
  --bg-sunken: var(--neutral-gray-2);
  --bg-hover: var(--neutral-gray-1);
  --bg-dark: var(--neutral-gray-7);          /* 暗い面の背景（black は強い強調専用） */
  /* 学習用に残す: 正規のトークンだが「選択状態・ボタン」に使うのは役割違反 */
  --bg-inverse: var(--neutral-black);

  --border-hairline: var(--neutral-gray-2);
  --border-default: var(--neutral-gray-3);
  --border-strong: var(--neutral-gray-6);

  /* icon-button の hover 面。Color ページに名前は無いが実コンポーネントの実データ値 */
  --bg-icon-hover: rgba(0, 10, 28, 0.1);

  /* ---------- Spacing (foundations/spacing-shape.md) ---------- */
  --xs: 4px;    /* アイコンとテキストの間 */
  --s: 8px;     /* 同一グループのボタン間 */
  --m: 16px;    /* コンテンツ内のセクション間 */
  --l: 24px;    /* コンテンツ間 */
  --xl: 40px;   /* 画面全体の padding */
  --xxl: 64px;  /* Web ページのコンテンツ間 */
  /* 6 段階表に無いが「4 の倍数」で準拠（2026-08-14 の解釈決着） */
  --space-3: 12px;
  --space-8: 32px;

  /* ---------- Corner ---------- */
  --radius-default: 4px;
  --radius-modal: 0px;
  --radius-chip: 20px;        /* chip 固有の実データ */
  --radius-status-tag: 34px;  /* status-tag 固有の実データ */
  --radius-checkbox: 2px;     /* checkbox 固有の実データ */
  --radius-full: 50%;         /* 縦横が等しい要素のみ */

  /* ---------- Shadow ---------- */
  --shadow-default: 0px 0px 10px 2px rgba(8, 11, 71, 0.2);
  --shadow-header: 0px 4px 8px rgba(3, 26, 67, 0.08);
  --shadow-toast: 0px 4px 8px rgba(0, 0, 0, 0.16); /* toast 固有の実データ */

  /* ---------- 操作要素の高さ ---------- */
  --btn-h: 40px;      /* Button size=m */
  --control-h: 32px;  /* size=s / segmented / icon-button / pagination */

  /* ---------- レイアウト（このサイト固有） ---------- */
  --sidebar-w: 280px;
  --content-max: 880px;
}