/*
 * arena-tokens.css — アリーナ（ゲームモード）のデザイントークン
 *
 * ここは「色・字送り・余白・角丸・影」の定義だけを置く。
 * 見た目の実装は arena.css 側に書き、必ずこの変数を経由すること。
 * 後でクラシック側へ移植できるよう、アリーナ固有の要素セレクタは書かない。
 *
 * ■ 単位について（重要）
 *   このサイトは css/grid.css で html { font-size: 62.5% } を指定しているため、
 *   1rem = 10px になる。rem で書くと「1rem=16px」前提の値が 62.5% に縮む事故が起きるため、
 *   アリーナのフォントサイズトークンは px で定義する。
 *   px 11〜12 の指定は禁止（本文 16px / ラベル 14px 下限）。
 */

:root {
    /* ---- 面 ---- */
    --arena-bg: #0f1115;            /* ページ地 */
    --arena-panel: #1a1d24;         /* パネル */
    --arena-panel-2: #232733;       /* パネル（1段明るい／ホバー） */
    --arena-line: #2f3544;          /* 罫線 */
    --arena-line-strong: #454c5e;

    /* ---- 文字 ---- */
    --arena-text: #e8e6e1;
    --arena-text-muted: #9aa1b1;
    --arena-text-dim: #6f7789;

    /* ---- アクセント ---- */
    --arena-gold: #d4af37;
    --arena-gold-soft: rgba(212, 175, 55, 0.14);
    --arena-red: #c1272d;
    --arena-red-soft: rgba(193, 39, 45, 0.16);
    --arena-green: #2e8b57;
    --arena-green-soft: rgba(46, 139, 87, 0.16);
    --arena-blue: #3d7fd1;          /* 走行中など中立の状態色 */

    /* ---- 状態色（レースのバー・バッジで共通に使う） ---- */
    --arena-status-running: var(--arena-blue);
    --arena-status-goal: var(--arena-green);
    --arena-status-bust: var(--arena-red);
    --arena-status-limit: var(--arena-gold);

    /* ---- レーサー識別色（最大4枠） ---- */
    --arena-racer-1: #d4af37;
    --arena-racer-2: #3d7fd1;
    --arena-racer-3: #2e8b57;
    --arena-racer-4: #c1272d;

    /* ---- タイポ ---- */
    --arena-font: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
    --arena-font-num: "SF Mono", "Roboto Mono", Consolas, "Courier New", monospace;

    --arena-fs-hero: 32px;          /* 資金など主役の数字 */
    --arena-fs-num: 24px;           /* 副次的な数字 */
    --arena-fs-h1: 26px;
    --arena-fs-h2: 20px;
    --arena-fs-body: 16px;          /* 本文の基準 */
    --arena-fs-label: 14px;         /* ラベル下限 */

    --arena-lh-tight: 1.25;
    --arena-lh-body: 1.7;

    /* ---- 余白 ---- */
    --arena-sp-1: 4px;
    --arena-sp-2: 8px;
    --arena-sp-3: 12px;
    --arena-sp-4: 16px;
    --arena-sp-5: 24px;
    --arena-sp-6: 32px;

    /* ---- 角丸・影・モーション ---- */
    --arena-radius: 10px;
    --arena-radius-sm: 6px;
    --arena-radius-pill: 999px;
    --arena-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    --arena-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --arena-dur: 300ms;             /* 演出は 300ms 以内に収める */
    --arena-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* ---- レイアウト ---- */
    --arena-maxw: 1000px;
    --arena-tap: 44px;              /* タップ領域の下限 */
}

/* 端末のモーション設定を尊重する（演出は全部止めてよい設計にする） */
@media (prefers-reduced-motion: reduce) {
    :root {
        --arena-dur: 1ms;
    }
}