/* ==========================================================================
   富加ゴルフ デザイントークン v2.0   (2026-09-16)
   基準色 = ロゴ実測値 #004AAD  (HSV 214/100/68, 白文字 8.13:1)

   ■ 2層構成
     Layer 1 primitive … 実際の色。滅多に増やさない。
     Layer 2 semantic  … 役割名。★画面のコードはこちらだけを参照する★
   ■ hex の直書きは禁止。足りない色が出たら、まずここに追加する。

   ■ 情報の順序（画面を作るときの並び）
     1. 営業状態（休業・メンテナンス）… 営業していなければ他は全て無意味
     2. 結論の数値（空き打席数）＋「いつもと比べてどうか」＋最終更新時刻
     3. 判断材料（混雑予想）
     4. 詳細（打席一覧・折りたたみ）
     5. 来店決定後の情報（物販など）

   ■ 打席番号は No.3〜18（全16打席）。1〜16ではない。左打席は No.6 / 10 / 18。
   ========================================================================== */
:root{
  /* ---------- Layer 1 : primitive ---------- */
  /* blue — h214。ロゴから生成 */
  --tg-b950:#06203F;  /* 16.3:1  最暗部・コード地 */
  --tg-b900:#0A2E5C;  /* 13.5:1  大面積の地（彩度を落とした青） */
  --tg-b800:#003B8C;  /* 10.5:1  押下・境界 */
  --tg-b700:#004AAD;  /*  8.1:1  ★ロゴ実測値。唯一の基準★ */
  --tg-b600:#1264CF;  /*  5.6:1  ホバー・二次リンク */
  --tg-b500:#3D86E8;  /*  3.6:1  暗背景の文字用。白地の本文には使わない */
  --tg-b100:#DCE9FA;  /* 選択中の行 */
  --tg-b050:#F0F6FD;  /* ゼブラ行 */

  /* status — 4色1意味。青=行動 / 緑=空き / 黄=混雑 / 赤=満席 */
  --tg-green:#15803D; --tg-green-bar:#16A34A; --tg-green-tint:#ECFDF1; --tg-green-line:#BBE9CB;
  --tg-amber:#B45309; --tg-amber-bar:#D97706; --tg-amber-tint:#FEF6E7; --tg-amber-line:#F2D6A6;
  --tg-red:  #B3261E; --tg-red-bar:  #D32F2F; --tg-red-tint:  #FDECEA; --tg-red-line:  #F3C3BE;

  /* neutral — 青に寄せた無彩色。#ccc #999 は全廃 */
  --tg-n900:#141922;  /* 17.6:1 見出し・数値 */
  --tg-n700:#39404E;  /* 10.4:1 本文 */
  --tg-n500:#5F6878;  /*  5.6:1 補助文字の下限（旧 #999） */
  --tg-n300:#C2C9D4;  /* 強い罫線。文字には使わない */
  --tg-n200:#DEE3EB;  /* 罫線（旧 #ddd） */
  --tg-n100:#EFF2F6;  /* セル・非活性 */
  --tg-n050:#F9FAFC;  /* ページ地 */

  /* ---------- Layer 2 : semantic ★ここだけ参照する★ ---------- */
  --tg-bg:            var(--tg-n050);
  --tg-surface:       #FFFFFF;
  --tg-surface-2:     var(--tg-n100);
  --tg-ground:        var(--tg-b900);   /* 大面積の地・ヘッダー・ボード */

  --tg-text:          var(--tg-n900);
  --tg-text-muted:    var(--tg-n700);
  --tg-text-faint:    var(--tg-n500);
  --tg-text-on-accent:#FFFFFF;

  --tg-border:        var(--tg-n200);
  --tg-border-strong: var(--tg-n300);

  --tg-accent:        var(--tg-b700);   /* ブランド＝押せるもの */
  --tg-accent-hover:  var(--tg-b600);
  --tg-accent-press:  var(--tg-b800);
  --tg-accent-tint:   var(--tg-b100);

  --tg-open: var(--tg-green); --tg-open-bar: var(--tg-green-bar);
  --tg-open-tint: var(--tg-green-tint); --tg-open-line: var(--tg-green-line);
  --tg-busy: var(--tg-amber); --tg-busy-bar: var(--tg-amber-bar);
  --tg-busy-tint: var(--tg-amber-tint); --tg-busy-line: var(--tg-amber-line);
  --tg-full: var(--tg-red);   --tg-full-bar: var(--tg-red-bar);
  --tg-full-tint: var(--tg-red-tint);   --tg-full-line: var(--tg-red-line);

  /* ---------- type ---------- */
  --tg-font-num:  "Barlow Condensed","Arial Narrow",system-ui,sans-serif; /* 数字・英字のみ。日本語を入れない */
  --tg-font-body: "Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;

  --tg-fs-hero:  clamp(48px,12vw,64px); /* 空き打席数など */
  --tg-fs-h1:    28px;
  --tg-fs-h2:    22px;
  --tg-fs-num:   20px;   /* 打席番号・金額 */
  --tg-fs-body:  16px;   /* 本文。ここを下回らない */
  --tg-fs-label: 14px;   /* 状態ラベル・ボタン */
  --tg-fs-micro: 13px;   /* 英字ラベル */
  --tg-fs-note:  12px;   /* 注記・補助（下限）。必ず --tg-text-faint 以上の濃さで */
  --tg-fs-legal: 11px;   /* 出典表示・但し書きの絶対下限。ここより小さくしない */

  /* ---------- space ---------- */
  --tg-s1:4px; --tg-s2:8px;  --tg-s3:12px; --tg-s4:16px;
  --tg-s5:24px; --tg-s6:32px; --tg-s7:48px;
  --tg-radius:3px;
  --tg-tap:44px;  /* タップ領域の下限 */
  --tg-shadow:0 1px 2px rgba(6,32,63,.06), 0 8px 24px -12px rgba(6,32,63,.20);
}

/* ダークモードは semantic 層のみ差し替える */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tg-bg:#0B0F16; --tg-surface:#141A24; --tg-surface-2:#1C2330; --tg-ground:#06203F;
    --tg-text:#E9EDF3; --tg-text-muted:#BEC6D2; --tg-text-faint:#909AA9;
    --tg-border:#28303C; --tg-border-strong:#3A4452;
    --tg-accent:#6FA8F0; --tg-accent-hover:#8FBDF5; --tg-text-on-accent:#06203F;
    --tg-open:#5FD48B; --tg-busy:#E9A54A; --tg-full:#F08076;
    --tg-open-tint:#0D2418; --tg-busy-tint:#2A1D08; --tg-full-tint:#2B100D;
    --tg-open-line:#1E5335; --tg-busy-line:#5C3F12; --tg-full-line:#5E241F;
  }
}
:root[data-theme="dark"]{
  --tg-bg:#0B0F16; --tg-surface:#141A24; --tg-surface-2:#1C2330; --tg-ground:#06203F;
  --tg-text:#E9EDF3; --tg-text-muted:#BEC6D2; --tg-text-faint:#909AA9;
  --tg-border:#28303C; --tg-border-strong:#3A4452;
  --tg-accent:#6FA8F0; --tg-accent-hover:#8FBDF5; --tg-text-on-accent:#06203F;
  --tg-open:#5FD48B; --tg-busy:#E9A54A; --tg-full:#F08076;
  --tg-open-tint:#0D2418; --tg-busy-tint:#2A1D08; --tg-full-tint:#2B100D;
  --tg-open-line:#1E5335; --tg-busy-line:#5C3F12; --tg-full-line:#5E241F;
}

/* ---------- Layer 3 : component（最小セット） ---------- */
.tg-num{ font-family:var(--tg-font-num); font-variant-numeric:tabular-nums; }

.tg-btn{
  font-family:var(--tg-font-body); font-weight:700; font-size:var(--tg-fs-body);
  min-height:var(--tg-tap); padding:11px 20px; border-radius:var(--tg-radius);
  border:2px solid transparent; display:inline-flex; align-items:center; cursor:pointer;
}
.tg-btn-primary{ background:var(--tg-accent); color:var(--tg-text-on-accent); }
.tg-btn-primary:hover{ background:var(--tg-accent-hover); }
.tg-btn-primary:active{ background:var(--tg-accent-press); }
.tg-btn-secondary{ background:transparent; color:var(--tg-accent); border-color:var(--tg-accent); }
.tg-btn-quiet{ background:var(--tg-surface-2); color:var(--tg-text-muted); }
.tg-btn:focus-visible{ outline:3px solid var(--tg-accent); outline-offset:2px; }

.tg-badge{ font-size:var(--tg-fs-micro); font-weight:700; padding:3px 11px;
  border-radius:2px; border:1px solid; }
.tg-badge-open{ background:var(--tg-open-tint); color:var(--tg-open); border-color:var(--tg-open-line); }
.tg-badge-busy{ background:var(--tg-busy-tint); color:var(--tg-busy); border-color:var(--tg-busy-line); }
.tg-badge-full{ background:var(--tg-full-tint); color:var(--tg-full); border-color:var(--tg-full-line); }

/* ==========================================================================
   禁止事項（レビュー時チェックリスト）
   × hex の直書き / primitive の直接参照
   × 青→紫のグラデーション（青のグラデは同一色相 b700→b900 のみ）
   × 緑・黄・赤を状態表示以外に使う
   × コントラスト 4.5:1 未満のテキスト
   × Material / Tailwind のデフォルト色（#4caf50 #22c55e #f97316 #ffc107 等）
   × Inter / Roboto / Space Grotesk の既定使用
   × 意味のない 01・02・03 番号、全要素に同じ角丸と影、絵文字の見出し記号
   必須
   ○ 状態は「色 + 文字」の二重表現
   ○ データ画面には最終更新時刻を表示
   ○ タップ領域 44px 以上、本文 16px 以上
   ========================================================================== */