/*
 * Design tokens from the wireframe (.claude/claude-design). Light on :root, dark when the system asks for it
 * (unless the visitor chose light) or when the visitor chose dark. The dark values appear twice on purpose:
 * CSS can't share one block between a media query and an attribute selector.
 */
:root {
    color-scheme: light;
    --bg: #f6f6f4;
    --surface: #ffffff;
    --surface-bar: #ffffff;
    --surface-2: #f1f0ed;
    --text: #17181b;
    --text-muted: #6b6d74;
    --text-faint: #b8b8b4;
    --danger: #c0392b;
    --success: #23663f;
    --warning: #8f5500;
    --border: rgba(0, 0, 0, .08);
    --border-strong: rgba(0, 0, 0, .14);
    --strong: #17181b;
    --on-strong: #ffffff;
    --shadow-panel: 0 20px 60px rgba(0, 0, 0, .18);
    --accent-l: .55;
    --accent-text-l: .42;
    --accent-h: 250;

    --radius-s: 6px;
    --radius-m: 8px;
    --radius-l: 10px;
    --radius-xl: 14px;
    --radius-pill: 999px;
    --font: Geist, system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --bar-h: 56px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0f1012;
        --surface: #18191c;
        --surface-bar: #0f1012;
        --surface-2: #1c1d21;
        --text: #ececee;
        --text-muted: #8b8d94;
        --text-faint: #4a4c52;
        --danger: #ff7b6e;
        --success: #6fd39a;
        --warning: #ffb547;
        --border: rgba(255, 255, 255, .08);
        --border-strong: rgba(255, 255, 255, .14);
        --strong: #ececee;
        --on-strong: #0f1012;
        --shadow-panel: -20px 0 60px rgba(0, 0, 0, .55);
        --accent-l: .76;
        --accent-text-l: .88;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1012;
    --surface: #18191c;
    --surface-bar: #0f1012;
    --surface-2: #1c1d21;
    --text: #ececee;
    --text-muted: #8b8d94;
    --text-faint: #4a4c52;
    --danger: #ff7b6e;
    --success: #6fd39a;
    --warning: #ffb547;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .14);
    --strong: #ececee;
    --on-strong: #0f1012;
    --shadow-panel: -20px 0 60px rgba(0, 0, 0, .55);
    --accent-l: .76;
    --accent-text-l: .88;
}

/* One hue per game. */
[data-game="hololive"] {
    --accent-h: 215;
}

[data-game="yugioh"] {
    --accent-h: 285;
}

/*
 * A custom property that uses var() is computed where it is declared, so the accents are declared again on
 * every [data-game] element: there they pick up the game's hue and the inherited lightness of the theme.
 */
:root,
[data-game] {
    --accent: oklch(var(--accent-l) .12 var(--accent-h));
    --accent-soft: oklch(var(--accent-l) .12 var(--accent-h) / .14);
    --accent-text: oklch(var(--accent-text-l) .09 var(--accent-h));
}