/* 推し店 デザイントークン（推しにゅ〜のトークンをブランド色だけ差し替え・2026-08-14 14:52 JST）
   ★差し替えたのは --accent / --accent-text / --accent-brand / --accent-soft / --live の5つのみ
     （ライト・【D1】・【D2】の3ブロックすべて）。ニュートラル・セマンティック・形状は無改変。
   ★実測コントラスト: ライト --accent #8F5A12 対 白 5.77 ／ --accent-text #7A4D0F 対 白 7.25・対 --bg 6.50
     ダーク --accent-text #E5B45C 対 --surface 8.92（いずれもAA 4.5以上）。
   ★--live #E8517B は白文字との比 3.56（AA未達）＝赤ドット等の**非テキスト用途のみ**に使うこと。

   推しにゅ〜 デザイントークン（docs/08_デザインガイドライン.md 準拠）
   ★★ ダーク値は【D1】【D2】の2ブロックにある。片方だけ直すと
      「OS追随のときだけ色が違う」事故になる。必ず両方を同時に更新すること。
      2ブロックの一致は tests/Unit/DesignTokenParityTest.php が機械検査する。
   ★ 役割の別（docs/26・scratchpad/dark_C1_トークン確定.md）
      --accent       … 白文字が載る塗り面（白との比 4.50 ＝ AA）
      --accent-text  … 文字・アイコン・リンク（地との比 4.5 以上）
      --accent-brand … 非テキスト専用のブランド識別色。--bg 直上での使用は禁止（ライト 2.83）
                       ＝使ってよいセレクタは tests/Unit/DesignTokenContrastTest.php の
                         許可リストで固定する（規約だけでは守られなかった実績があるため）
      --surface2     … --surface より1段明るい面。ダークでは本文のインライン背景色
                       （蛍光ペン）の置換先も兼ねる（app.css の安全網）
   ★ 白下地を敷いたら前景も必ず指定する（--ad-canvas ⇔ --on-ad-canvas）。
      背景だけ白にすると、ダークの --label（白）を継承して文字が消える（比 1.00）。 */
:root {
    color-scheme: light;

    /* ブランド */
    --accent: #8F5A12;
    --accent-text: #7A4D0F;
    --on-accent: #FFFFFF;
    --accent-brand: #D9A441;
    --accent-soft: #FAF1DF;

    /* ニュートラル（ライト） */
    --bg: #F2F2F7;
    --surface: #FFFFFF;
    --surface2: #FFFFFF;
    --label: #000000;
    --secondary-label: rgba(60, 60, 67, 0.6);
    --tertiary-label: rgba(60, 60, 67, 0.3);
    --separator: rgba(60, 60, 67, 0.29);
    --fill: rgba(120, 120, 128, 0.2);

    /* セマンティック */
    --live: #E8517B;
    --success: #34C759;
    --warning: #FF9500;
    --danger: #FF3B30;
    --danger-fill: #EA1A1F;

    /* 広告（両テーマでAA担保） */
    --ad-label: rgba(60, 60, 67, 0.75);
    --ad-label-border: rgba(60, 60, 67, 0.6);
    --ad-canvas: #FFFFFF;
    --on-ad-canvas: #000000;

    /* 重ね表示 */
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.22);

    /* 形状・余白 */
    --radius-card: 16px;
    --radius-thumb: 12px;
    --radius-sheet: 20px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* タイポグラフィ */
    --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* 【D1】OSダーク かつ ユーザーが明示ライトを選んでいない（JS無効環境の保険） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --accent: #8F5A12;
        --accent-text: #E5B45C;
        --on-accent: #FFFFFF;
        --accent-brand: #D9A441;
        --accent-soft: #3A2A14;
        --bg: #000000;
        --surface: #1C1C1E;
        --surface2: #2C2C2E;
        --label: #FFFFFF;
        --secondary-label: rgba(235, 235, 245, 0.6);
        --tertiary-label: rgba(235, 235, 245, 0.3);
        --separator: rgba(84, 84, 88, 0.6);
        --fill: rgba(120, 120, 128, 0.36);
        --live: #E8517B;
        --success: #30D158;
        --warning: #FF9F0A;
        --danger: #FF453A;
        --danger-fill: #EA1A1F;
        --ad-label: rgba(235, 235, 245, 0.75);
        --ad-label-border: rgba(235, 235, 245, 0.6);
        --ad-canvas: #FFFFFF;
        --on-ad-canvas: #000000;
        --scrim: rgba(0, 0, 0, 0.65);
        --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.7);
    }
}

/* 【D2】手動ダーク ★【D1】より後に書く（詳細度が同じ (0,2,0) なので後勝ち） */
:root[data-theme="dark"] {
    color-scheme: dark;
    --accent: #8F5A12;
    --accent-text: #E5B45C;
    --on-accent: #FFFFFF;
    --accent-brand: #D9A441;
    --accent-soft: #3A2A14;
    --bg: #000000;
    --surface: #1C1C1E;
    --surface2: #2C2C2E;
    --label: #FFFFFF;
    --secondary-label: rgba(235, 235, 245, 0.6);
    --tertiary-label: rgba(235, 235, 245, 0.3);
    --separator: rgba(84, 84, 88, 0.6);
    --fill: rgba(120, 120, 128, 0.36);
    --live: #E8517B;
    --success: #30D158;
    --warning: #FF9F0A;
    --danger: #FF453A;
    --danger-fill: #EA1A1F;
    --ad-label: rgba(235, 235, 245, 0.75);
    --ad-label-border: rgba(235, 235, 245, 0.6);
    --ad-canvas: #FFFFFF;
    --on-ad-canvas: #000000;
    --scrim: rgba(0, 0, 0, 0.65);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.7);
}