/* ============================================================
   tokens.css — okane のデザイントークン(唯一のソース)
   正本: docs/art-style-guide.md §2 カラーパレット
   色の実値をここ以外に書かないこと(Hero プロンプトとも同じ値を共有している)。
   ============================================================ */

:root {
  color-scheme: light dark;

  /* --- ブランド色(ライト/ダークで変えない絶対値・アートガイド §2) --- */
  --gold:        #F4B942; /* 主役色(コイン・強調・主ボタン) */
  --gold-deep:   #C98F1B; /* ゴールドの影・縁 */
  --money-green: #2E8B57; /* 副色(紙幣・成功・進行) */
  --navy:        #1E2A44; /* ダーク背景(世界地図の海・夜空) */
  --cream:       #FAF3E3; /* ライト背景 */
  --coral:       #E8604C; /* 警告・ゲームオーバーライン */
  --sky:         #4FA3D1; /* 地図の解放国ハイライト・リンク */

  /* --- ボタンの面に使う明るい派生色(2026-09-01 オーナー指示「TOPは全部に色を」) ---
     (!) 原色をそのまま面にすると**白字でも濃字でもコントラストが足りない**
         (実測: sky に白字 2.8:1 / green に濃字 3.4:1)。そこで
         **--gold と同じ「明るい面 + 濃字(--on-accent)」の型**に揃うところまで明るくした値。
         濃字 #23293A に対して sky 7.0:1 / coral 6.7:1 / green 7.3:1(gold は 8.0:1)。
     (!) --coral-bright は**危険色 --coral より明確に明るい**こと。
         設定の「進捗リセット」が --coral の面なので、同じ濃さだと意味が混ざる。
     (!) 両テーマで同値。濃字はライトでもダークでも濃いのでどちらも成立する。 */
  --sky-bright:   #6FC0E8; /* TOP「フリーモード」の面 */
  --coral-bright: #F79A7C; /* TOP「デイリー挑戦」の面 */
  --green-bright: #6BCB94; /* TOP「ずかん」の面 */

  /* --- 役割色(テーマで入れ替わる。既定 = ライト) --- */
  --bg:          var(--cream);
  --bg-elev:     #FFFFFF;
  --fg:          #23293A;
  --fg-muted:    #5C6478;
  --line:        #E2D8C0;
  --accent:      var(--gold-deep); /* ライト背景では gold は文字色に使わない(コントラスト不足) */
  --on-accent:   #23293A;

  /* --- 駒アートの縁取り規格(アートガイド §2「白+濃色の2重縁」) --- */
  --piece-rim-inner: #FFFFFF;
  --piece-rim-outer: var(--navy);

  /* --- 余白・角丸・段階(タブレット対応の中央寄せもここを使う) --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* バナー広告に隠れる分の逃がし(**実測値を www/js/ads.js が実行時に書き込む**)。
     (!) targetSdk 36 の edge-to-edge では、テーマの fitsSystemWindows と
     admob-nextgen 側のインセット処理が二重に効き、
     **WebView の下端がナビバー1つ分(ジェスチャーナビで 24px)バナーの裏に潜り込む**
     (2026-08-28 Pixel_9a で実測: WebView 下辺 y2193 / バナー上辺 y2130)。
     プラグインの `on.banner.load` が返す高さ(dp)と screen/innerHeight の差から
     ズレ量を出してここに入れる。バナーを出していない画面では 0 に戻る。
     詳細は docs/PITFALLS.md の「targetSdk 36 では〜」の項。 */
  --banner-reserve: 0px;

  /* 本文の最大幅。タブレットでは左右 padding で中身をここまで中央に寄せる
     (NEW-APP-GUIDE.md タブレット対応: 要素を足さず padding-inline で寄せる) */
  --content-max: 36rem;

  --font-ui: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
             "Noto Sans JP", "Yu Gothic", sans-serif;

  --shadow-sm: 0 1px 2px rgb(30 42 68 / 0.10);
  --shadow-md: 0 4px 14px rgb(30 42 68 / 0.14);
  --shadow-lg: 0 12px 32px rgb(30 42 68 / 0.22);
}

/* --- ダークテーマ --- */
/* 端末設定に追従(明示指定 data-theme="light" が付いている時は追従しない) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--navy);
    --bg-elev:   #27334F;
    --fg:        #F2EEE3;
    --fg-muted:  #A9B2C6;
    --line:      #3A466A;
    --accent:    var(--gold);
    --on-accent: #1A1F2E;
  }
}

/* 設定画面からの明示指定(端末設定より優先) */
:root[data-theme="dark"] {
  --bg:        var(--navy);
  --bg-elev:   #27334F;
  --fg:        #F2EEE3;
  --fg-muted:  #A9B2C6;
  --line:      #3A466A;
  --accent:    var(--gold);
  --on-accent: #1A1F2E;
}