/* tokens.css — asobito デザイントークン（Layer 1 + Layer 2）
   Layer 1: Design Tokens（原始値、--_ プレフィックス）
   Layer 2: Semantic Tokens（役割定義）+ main.css 後方互換エイリアス
   読み込み順: tokens.css → main.css → components.css → layout.css */

/*
  ╔══════════════════════════════════════════════════════
  ║  Typography Rules — asobito（違反は即 No GO）
  ╠══════════════════════════════════════════════════════
  ║  • font-family : 必ず var(--font-sans) を使用
  ║  • font-weight : 400 / 500 / 600 のみ（700以上禁止）
  ║  • font-size   : tokens 経由のみ（px 直書き禁止）
  ║  例外: アイコンフォント / チャートライブラリ内部のみ
  ╚══════════════════════════════════════════════════════
*/

:root {

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Layer 1: Design Tokens（原始値）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* ── Font family */
  --_font-sans: 'Inter', 'Noto Sans JP', sans-serif;

  /* ── Neutral（背景スケール） */
  --_bg-canvas:  #FFFFFF;
  --_bg-card:    #FFFFFF;
  --_bg-surface: #F7F9FC;

  /* ── Text scale */
  --_text-900: #0F172A;  /* タイトル専用 */
  --_text-800: #111111;  /* 本文主 */
  --_text-600: #444444;  /* 本文副 */
  --_text-400: #777777;  /* 補足 */
  --_text-300: #CBD5E1;  /* 無効 */

  /* ── Teal scale（主軸 = ナビ / 選択 / フォーカス / アクセント） */
  --_teal-700: #0F766E;
  --_teal-600: #0D9488;
  --_teal-50:  #CCFBF1;
  --_teal-200: #99F6E4;

  /* ── Blue scale（後方互換のため残存。新規コードは Teal を使うこと） */
  --_blue-700: #0F766E;  /* teal-700 に差し替え */
  --_blue-600: #0D9488;  /* teal-600 に差し替え */
  --_blue-50:  #CCFBF1;  /* teal-50 に差し替え */
  --_blue-200: #99F6E4;  /* teal-200 に差し替え */
  --_menu-hover-bg: rgba(0, 0, 0, 0.04);  /* hover: neutral gray（ライト領域用） */

  /* ── Sidebar dark palette */
  --sb-bg:     #0E1117;
  --sb-txt:    #94A3B8;
  --sb-active: #F8FAFC;
  --sb-act-bg: rgba(255,255,255,0.05);
  --sb-accent: #0D9488;
  --sb-group:  #475569;
  --sb-bdr:    rgba(255,255,255,0.08);

  /* ── Orange scale（行動軸 = btn-primary のみ） */
  --_orange-700: #C2410C;
  --_orange-600: #EA580C;

  /* ── Green scale（booked / success バッジのみ） */
  --_green-600: #10B981;
  --_green-50:  #D1FAE5;
  --_green-200: #A7F3D0;

  /* ── Yellow scale（警告） */
  --_yellow-600: #F59E0B;
  --_yellow-50:  #FEF3C7;
  --_yellow-200: #FDE68A;

  /* ── Red scale（危険 / 破壊的操作） */
  --_red-600: #EF4444;
  --_red-50:  #FEE2E2;
  --_red-200: #FECACA;

  /* ── Border */
  --_border: #E5E7EB;

  /* ── Type scale */
  --_fs-11: 11px;
  --_fs-12: 12px;
  --_fs-13: 13px;
  --_fs-14: 14px;
  --_fs-15: 15px;
  --_fs-16: 16px;
  --_fs-18: 18px;
  --_fs-20: 20px;
  --_fs-22: 22px;
  --_fs-24: 24px;

  /* ── Weight scale（700は存在しない） */
  --_fw-400: 400;
  --_fw-500: 500;
  --_fw-600: 600;

  /* ── Spacing scale（4px base） */
  --_sp-4:  4px;
  --_sp-8:  8px;
  --_sp-12: 12px;
  --_sp-16: 16px;
  --_sp-24: 24px;
  --_sp-32: 32px;
  --_sp-48: 48px;

  /* ── Radius */
  --_r-4:   4px;
  --_r-6:   6px;
  --_r-8:   8px;
  --_r-pill: 999px;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Layer 2: Semantic Tokens（役割定義）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* ── Font family */
  --font-sans: var(--_font-sans);

  /* ── Font weight（セマンティック alias） */
  --fw-regular:  var(--_fw-400);
  --fw-medium:   var(--_fw-500);
  --fw-semibold: var(--_fw-600);

  /* ── Font size（セマンティック alias） */
  --fs-caption:  var(--_fs-12);   /* breadcrumb / badge / tab-count */
  --fs-body:     var(--_fs-13);   /* 本文・td・btn・kpi-label */
  --fs-label:    var(--_fs-14);   /* input label・th */
  --fs-subtitle: var(--_fs-15);   /* セクション副題 */
  --fs-section:  var(--_fs-16);   /* セクションタイトル */

  /* ── Background */
  --bg:      var(--_bg-canvas);
  --card-bg: var(--_bg-card);
  --surf:    var(--_bg-surface);

  /* ── Text hierarchy */
  --t-title: var(--_text-900);  /* ページタイトルのみ */
  --t1:      var(--_text-800);  /* 本文主 */
  --t2:      var(--_text-600);  /* 本文副 */
  --t3:      var(--_text-400);  /* 補足 */
  --t4:      var(--_text-300);  /* 無効 */

  /* ── 主軸（Teal = ナビ / 選択 / フォーカス） */
  --blue:        var(--_teal-600);   /* #0D9488 */
  --blue-hover:  var(--_teal-700);   /* #0F766E */
  --blue-soft:   var(--_teal-50);    /* #CCFBF1 */
  --blue-border: var(--_teal-200);   /* #99F6E4 */

  /* ── 行動軸（オレンジ = btn-primary のみ） */
  --cta:       var(--_orange-600);
  --cta-hover: var(--_orange-700);

  /* ── 補助軸（緑 = booked / confirmed バッジのみ） */
  --success:        var(--_green-600);
  --success-soft:   var(--_green-50);
  --success-border: var(--_green-200);

  /* ── 警告 */
  --warning:        var(--_yellow-600);
  --warning-soft:   var(--_yellow-50);
  --warning-border: var(--_yellow-200);

  /* ── 危険 */
  --danger:        var(--_red-600);
  --danger-soft:   var(--_red-50);
  --danger-border: var(--_red-200);

  /* ── Border */
  --bdr: var(--_border);

  /* ── Menu interaction（ナビゲーション専用トークン） */
  --menu-hover-bg:      var(--_menu-hover-bg);  /* ホバー背景: 薄い青 */
  --menu-hover-text:    var(--blue);            /* ホバー文字: 青 */
  --menu-hover-radius:  var(--_r-6);           /* 角丸: 6px */
  --menu-hover-px:      var(--_sp-12);         /* 左右余白: 12px */
  --menu-hover-py:      var(--_sp-8);          /* 上下余白: 8px */
  --menu-item-gap:      var(--_sp-4);          /* 項目間隔: 4px */
  --menu-active-bg:     var(--blue-soft);      /* アクティブ背景: #EFF6FF ソリッド */
  --menu-active-text:   var(--blue);           /* アクティブ文字: 青 */
  --menu-active-border: var(--blue);           /* アクティブ左ボーダー色 */

  /* ── Layout constants */
  --sw: 240px;  /* サイドバー幅 */
  --th: 52px;   /* トップバー高さ */
  --r:  var(--_r-6);
  --rs: var(--_r-4);
  --rc: var(--_r-6);

  /* ── Table */
  --table-header:        var(--_bg-surface);
  --table-border:        var(--_border);
  --table-border-strong: var(--_border);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     main.css 後方互換エイリアス
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

  /* design-tokens.css 旧名称 */
  --bg-app:     var(--_bg-canvas);
  --bg-surface: var(--_bg-card);
  --bg-muted:   var(--_bg-surface);
  --bg-table:   var(--_bg-surface);

  /* テキスト旧名称 */
  --text-title:    var(--_text-900);
  --text-primary:  var(--_text-800);
  --text-main:     var(--_text-600);
  --text-sub:      var(--_text-400);
  --text-muted:    var(--_text-400);
  --text-disabled: var(--_text-300);

  /* アクセント（Teal） */
  --accent:   #0D9488;
  --accent-h: #0F766E;
  --accent-d: #CCFBF1;
  --accent-t: #0F766E;

  /* v3 セマンティック */
  --pos:     #10B981;
  --pos-bg:  #D1FAE5;
  --neg:     #EF4444;
  --neg-bg:  #FEE2E2;
  --warn:    #F59E0B;
  --warn-bg: #FEF3C7;

  /* v3 追加 */
  --rs: 8px;  /* border-radius 標準 */
  --ink:    #0E1117;
  --slate:  #1C2333;
  --muted:  #64748B;

  /* 色旧名称 */
  --green:   var(--success);
  --green-d: var(--success-soft);
  --red:     var(--danger);
  --red-d:   var(--danger-soft);
  --amber:   var(--warning);
  --amber-d: var(--warning-soft);

  /* ボーダー旧名称 */
  --bdr-s:          var(--_border);
  --neutral-border: var(--_border);

  /* neutral */
  --neutral: var(--_bg-surface);

  /* CTA active（旧仕様互換） */
  --cta-active: var(--_orange-700);

  /* ── main.css タイポグラフィ変数の是正（Layer 2 の責務）
     main.css が !important でこれらの変数を参照するため、
     tokens.css（main.css より後に読まれる）で正しい値に上書きする。 */
  --fs-kpi:   var(--_fs-22);  /* main.css の 28px を 22px に是正 */
  --fs-title: var(--_fs-20);  /* page-hd-title 正値（20px） */
  --fs-hero:  var(--_fs-24);  /* main.css の 40px を 24px に是正 */
}