/* =========================================================
 * BAKUSYO.COM デザイントークン tokens.css
 *
 * ここには「値」だけを置く。セレクタ・コンポーネント定義は ui.css へ。
 * 読み込み順は必ず tokens.css → ui.css → ページ固有CSS。
 *
 * 方向性（2026-08 リファイン / bokete・9GAG型「ニュートラル×コンテンツ主役」）:
 *   地は純白＋ニュートラルグレー。色面でにぎやかさを作らず、
 *   イラスト・ネタ（＝コンテンツ）そのものを画面の主役にする。
 *   - primary（コーラル）  = アクセント専用（CTA・アクティブ状態のみ）
 *   - secondary（ティール）= 前進（次へ・成功・完了）
 *   - accent（イエロー）   = 注目（フォーカスリング・殿堂バッジ）※テキスト色には使わない
 *   淡色ティントは「小さなバッジ／タグ」用。カードの地色には使わない。
 *
 * CONCEPT.md §2「文字読解ゼロ」「サクサク」に従い、
 * モーションは短く（150-220ms）、色は絵文字を邪魔しない彩度に抑える。
 *
 * 互換方針: 変数名は削除しない（未移行ページが旧 ?v=1 参照でも壊れないよう、
 * 値だけを差し替える）。
 * ========================================================= */

:root {
    /* ===== canvas & surface ===== */
    --canvas: #FFFFFF;          /* ページ地（純白） */
    --surface: #FFFFFF;         /* カード・バー */
    --surface-2: #F6F7F8;       /* ニュートラルグレーのセクション地・サムネ台 */
    --surface-sunken: #EFF0F2;  /* 少し沈んだ面（トラック・プレースホルダ） */
    --hairline: #E9E9E7;
    --hairline-strong: #D9D9D6;
    --scrim: rgba(23, 25, 28, 0.48);

    /* ===== ink（3階調＋反転） ===== */
    --ink: #17191C;
    --ink-muted: #565B61;
    --ink-subtle: #9AA0A6;
    --ink-invert: #FFFFFF;

    /* ===== brand ===== */
    /* -deep は押し込み面・濃い縁用（旧3Dボタンの参照も残るので値は維持）。
       -ink は「白地に置くテキスト色」用（WCAG AA 4.5:1 以上）。
       -tint は淡バッジ／タグ専用。カード背景には使わない。 */
    --primary: #FF6B6B;
    --primary-deep: #E14D4D;
    --primary-ink: #C4342F;
    --primary-tint: #FDECEA;

    --secondary: #4ECDC4;
    --secondary-deep: #2FA89F;
    --secondary-ink: #1C7169;
    --secondary-tint: #EAF5F3;

    --accent: #FFD93D;
    --accent-deep: #E8B90F;
    --accent-ink: #7A5D00;
    --accent-tint: #FAF3E2;

    /* ===== radius ===== */
    /* ピル（--radius-pill）はチップ・タグ・小さな丸ボタンだけに使う。 */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ===== space（4px基準） ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;

    /* ===== elevation ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);   /* --shadow-sm の別名（既存参照用） */
    --shadow-raise: 0 6px 20px rgba(0, 0, 0, 0.09);
    --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.16);

    /* ===== motion ===== */
    --motion-fast: 150ms;
    --motion-base: 220ms;
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.22, .61, .36, 1);

    /* ===== layout ===== */
    --appbar-h: 52px;
    --tabbar-h: 60px;
    --content-max: 720px;
    --content-max-wide: 1040px;

    /* ===== type ===== */
    /* 丸ゴシックは幼く見えるため廃止。欧文は Inter（ui.css の @import。
       オフライン/file:// では system-ui へ素直に落ちる）、和文は角ゴシック。
       欧文見出しは weight 800 ＋ 負の letter-spacing で締める。 */
    --font-display: 'Inter', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Yu Gothic UI', Meiryo, system-ui, sans-serif;
    --font-body: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Yu Gothic UI', Meiryo, system-ui, sans-serif;

    /* 欧文ワードマーク・大見出し用のトラッキング */
    --track-tight: -0.02em;
    --track-tighter: -0.035em;

    /* ===== 互換エイリアス =====
       既存ページのインラインCSSが参照中。削除禁止。
       移行が全ページ完了するまで残す。 */
    --primary-color: var(--primary);
    --secondary-color: var(--secondary);
    --accent-color: #FFE66D;
    --dark-color: var(--ink);
    --light-color: var(--canvas);
}

/* OSの「視差効果を減らす」設定を尊重（CONCEPT.md §2-5 サクサクの延長）。 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
    }
}