/*
 * tokens.css — Design Token 基盤
 * 全ページ共通のCSS変数を一元管理します。
 * 個別CSSファイルの :root は段階的にこのファイルへ移行します。
 *
 * 命名規則:
 *   --color-{category}-{variant}
 *   --font-{property}
 *   --radius-{size}
 *   --spacing-{size}
 *
 * Token 分類:
 *   [Theme Tokens]  — data-theme 属性でダーク/ライト切替
 *   [Frozen Tokens] — テーマに依存しない固定値（ドネーションタイプ色、SCティア色）
 *
 * テーマ統合方針 (C7):
 *   viewer.css, archive.css, style.css, timestamp_manager.css 等の :root で定義
 *   されている重複変数は、このファイルのトークンに段階的に統合します。
 *   各ファイルの :root 削除は個別ファイル修正時に行います。
 */

/* ==========================================================================
 * DEFAULT THEME: Dark A (Midnight Blue)
 * :root = dark theme (default)
 * ========================================================================== */
:root {
    /* ========================
     * [Theme Tokens] Background Colors
     * ======================== */
    --color-bg-base: #0b1120;
    --color-bg-surface: #111827;
    --color-bg-surface-hover: #1a2332;
    --color-bg-elevated: #1e293b;

    /* ========================
     * [Theme Tokens] Text Colors
     * ======================== */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #7a8a9e; /* M4-22: raised from #64748b for WCAG AA 4.5:1 on dark bg */

    /* ========================
     * [Theme Tokens] Accent / Brand
     * ======================== */
    --color-accent-primary: #60a5fa;
    --color-accent-hover: #3b82f6;

    /* ========================
     * [Theme Tokens] Semantic Colors
     * ======================== */
    --color-danger: #ef4444;
    --color-success: #10b981;
    --color-warning: #FFC107;

    /* ========================
     * [Theme Tokens] Surface Overlays
     * 半透明オーバーレイ（チップ背景、ホバー、アクティブ等）
     * ======================== */
    --color-overlay-lightest: rgba(255, 255, 255, 0.03);
    --color-overlay-light: rgba(255, 255, 255, 0.05);
    --color-overlay-medium: rgba(255, 255, 255, 0.1);
    --color-overlay-heavy: rgba(255, 255, 255, 0.15);
    --color-overlay-strong: rgba(255, 255, 255, 0.2);
    --color-shadow-default: rgba(0, 0, 0, 0.3);
    --color-shadow-heavy: rgba(0, 0, 0, 0.5);

    /* ========================
     * [Theme Tokens] Border Colors
     * ======================== */
    --color-border-default: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.12);

    /* ========================
     * [Theme Tokens] Extended Surface Colors
     * dashboard.css / viewer.css 互換
     * ======================== */
    --color-surface-alt: #1e293b;
    --color-surface-secondary: rgba(255, 255, 255, 0.04);
    --color-surface-hover: rgba(255, 255, 255, 0.08);
    --color-surface-variant: rgba(255, 255, 255, 0.06);
    --color-primary-surface: rgba(255, 77, 106, 0.12);

    /* ========================
     * [Theme Tokens] Extended Semantic Colors
     * ======================== */
    --color-accent: var(--color-accent-primary);
    --color-primary: var(--color-accent-primary);
    --color-error: var(--color-danger);
    --color-border: var(--color-border-default);

    /* ========================
     * [Frozen Tokens] Type Badge Colors (donation types)
     * ⚠ テーマで切替しない — ドネーション表示の配色は固定
     * ======================== */
    --color-type-superchat: #FFB300;
    --color-type-super-sticker: #E65100;
    --color-type-membership: #0F9D58;
    --color-type-milestone: #4285F4;
    --color-type-gift: #DB4437;

    /* ========================
     * [Frozen Tokens] SuperChat Tier Colors
     * ⚠ テーマで切替しない — SCティア色は固定
     * ======================== */
    --color-sc-blue: #1565C0;
    --color-sc-cyan: #00B8D4;
    --color-sc-green: #00BFA5;
    --color-sc-yellow: #FFB300;
    --color-sc-orange: #E65100;
    --color-sc-magenta: #C2185B;
    --color-sc-red: #D32F2F;

    /* ========================
     * [Theme Tokens] Typography (C7: CDN依存排除)
     * ======================== */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;

    /* ========================
     * [Theme Tokens] Spacing Scale
     * ======================== */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */

    /* ========================
     * [Theme Tokens] Border Radius Scale
     * ======================== */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-full: 9999px;

    /* ========================
     * iOS Safe Area Insets
     * ======================== */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* ========================
     * Aliases (後方互換)
     * 既存CSSが直接参照している旧変数名を維持します。
     * 個別CSSの :root 削除完了後に段階的に廃止。
     * ======================== */

    /* archive.css / viewer.css / style.css 互換 */
    --bg-color: var(--color-bg-base);
    --card-bg: var(--color-bg-surface);
    --card-hover: var(--color-bg-surface-hover);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --accent-color: var(--color-accent-primary);
    --accent-hover: var(--color-accent-hover);
    --border-color: var(--color-border-default);
    --border-light: var(--color-border-light);
    --primary-color: var(--color-accent-primary);
    --danger-color: var(--color-danger);
    --success-color: var(--color-success);
    --font-family: var(--font-family-base);

    /* archive.css type色 互換 (Frozen — テーマで変化しない) */
    --type-superchat: var(--color-type-superchat);
    --type-super_sticker: var(--color-type-super-sticker);
    --type-membership: var(--color-type-membership);
    --type-milestone: var(--color-type-milestone);
    --type-gift: var(--color-type-gift);

    /* viewer.css SC色 互換 (Frozen — テーマで変化しない) */
    --sc-blue: var(--color-sc-blue);
    --sc-cyan: var(--color-sc-cyan);
    --sc-green: var(--color-sc-green);
    --sc-yellow: var(--color-sc-yellow);
    --sc-orange: var(--color-sc-orange);
    --sc-magenta: var(--color-sc-magenta);
    --sc-red: var(--color-sc-red);

    /* timestamp_manager.css 互換 */
    --bg-primary: var(--color-bg-base);
    --bg-secondary: var(--color-bg-surface);
    --bg-tertiary: var(--color-bg-surface-hover);
    --bg-hover: var(--color-bg-elevated);
    --accent: var(--color-accent-primary);
    --accent-dim: rgba(96, 165, 250, 0.15);
    --danger: var(--color-danger);
    --danger-dim: rgba(239, 68, 68, 0.15);
    --success: var(--color-success);
    --success-dim: rgba(16, 185, 129, 0.15);
    --warning: var(--color-warning);
    --border: var(--color-border-default);

    /* privacy_policy.css 互換 */
    --bg: var(--color-bg-base);
    --card: var(--color-bg-surface);
    --text: var(--color-text-primary);
    --muted: var(--color-text-secondary);
}

/* ==========================================================================
 * LIGHT THEME: Light A (Sky Blue)
 * [data-theme="light"] で Theme Tokens のみ上書き
 * Frozen Tokens（ドネーションタイプ色、SCティア色）は上書きしない
 * ========================================================================== */
[data-theme="light"] {
    /* ========================
     * [Theme Tokens] Background Colors
     * ======================== */
    --color-bg-base: #f0f7ff;
    --color-bg-surface: #ffffff;
    --color-bg-surface-hover: #e8f1fb;
    --color-bg-elevated: #e8f1fb;

    /* ========================
     * [Theme Tokens] Text Colors
     * ======================== */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;

    /* ========================
     * [Theme Tokens] Accent / Brand
     * ======================== */
    --color-accent-primary: #2563eb;
    --color-accent-hover: #1d4ed8;

    /* ========================
     * [Theme Tokens] Surface Overlays
     * ======================== */
    --color-overlay-lightest: rgba(0, 0, 0, 0.02);
    --color-overlay-light: rgba(0, 0, 0, 0.04);
    --color-overlay-medium: rgba(0, 0, 0, 0.07);
    --color-overlay-heavy: rgba(0, 0, 0, 0.1);
    --color-overlay-strong: rgba(0, 0, 0, 0.14);
    --color-shadow-default: rgba(0, 0, 0, 0.1);
    --color-shadow-heavy: rgba(0, 0, 0, 0.2);

    /* ========================
     * [Theme Tokens] Border Colors
     * ======================== */
    --color-border-default: rgba(0, 0, 0, 0.08);
    --color-border-light: rgba(0, 0, 0, 0.12);

    /* ========================
     * [Theme Tokens] Extended Surface Colors (light)
     * ======================== */
    --color-surface-alt: #e5e7eb;
    --color-surface-secondary: rgba(0, 0, 0, 0.03);
    --color-surface-hover: rgba(0, 0, 0, 0.06);
    --color-surface-variant: rgba(0, 0, 0, 0.04);
    --color-primary-surface: rgba(220, 38, 38, 0.08);

    /* ========================
     * Aliases 上書き (Theme Tokens のみ)
     * ======================== */
    --color-primary: var(--color-accent-primary);
    --accent-dim: rgba(37, 99, 235, 0.15);
}

/* ---- Global select / option styling ---- */
select,
select option {
    background-color: var(--color-bg-surface, #111827);
    color: var(--color-text-primary, #f1f5f9);
}

select option:checked {
    background-color: var(--color-accent-primary, #60a5fa);
    color: #fff;
}

/* ---- a11y: Global focus-visible ring ---- */
:root {
    --focus-ring-color: var(--color-accent-primary, #60a5fa);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
}

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}