/*
 * Shared component layer for the theme manifest in js/designSystem.js.
 * This file follows the legacy stylesheets so a compact set of semantic
 * tokens can recolor and re-typeset the whole game.
 */
:root {
    color-scheme: dark;
    --font-display: 'Cinzel', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-ui: 'Montserrat', 'Segoe UI', sans-serif;
    --display-weight: 600;
    --display-style: normal;
    --display-tracking: .055em;
    --display-transform: none;
    --surface-deep: oklch(14% .028 255);
    --surface: oklch(21% .034 255);
    --surface-raised: oklch(28% .04 252);
    --surface-board: oklch(18% .027 251);
    --text-primary: oklch(95% .025 85);
    --text-muted: oklch(80% .028 83);
    --metal: oklch(69% .095 79);
    --metal-bright: oklch(87% .105 84);
    --accent: oklch(43% .105 251);
    --accent-bright: oklch(67% .14 244);
    --accent-ink: oklch(20% .035 70);
    --control-ink: oklch(95% .025 85);
    --backdrop-copy: oklch(80% .028 83);
    --line: oklch(70% .07 79 / .38);
    --success: oklch(84% .10 158);
    --danger: oklch(67% .17 22);
    --focus: oklch(91% .11 86);
    --control-top: oklch(38% .07 254);
    --control-bottom: oklch(24% .045 254);
    --control-hover-top: oklch(45% .08 250);
    --control-hover-bottom: oklch(29% .055 252);
    --primary-top: oklch(92% .10 87);
    --primary-bottom: oklch(75% .13 78);
    --primary-hover-top: oklch(96% .075 87);
    --primary-hover-bottom: oklch(83% .12 82);
    --empty-pane-top: oklch(84% .026 235);
    --empty-pane-bottom: oklch(71% .03 238);
    --marked-pane: oklch(66% .028 237);
    --marked-ink: oklch(27% .05 255);
    --menu-ink: oklch(95% .025 85);
    --menu-muted: oklch(84% .03 86);
    --menu-control: oklch(25% .055 165 / .92);
    --menu-control-hover: oklch(33% .06 158 / .96);
    --menu-overlay: linear-gradient(90deg, oklch(10% .035 180 / .70), oklch(10% .03 180 / .24) 42%, transparent 70%);
    --backdrop-filter: brightness(.68) saturate(.82) hue-rotate(-5deg);
    --control-radius: 6px;
    --panel-radius: 12px;
    --window-radius: 72px 72px 7px 7px;

    /* Compatibility aliases for the established mechanical layer. */
    --bg-base: var(--surface-deep);
    --stone-deep: var(--surface-deep);
    --stone: var(--surface-raised);
    --ivory: var(--text-primary);
    --copy-bright: var(--text-primary);
    --copy-muted: var(--text-muted);
    --text-body: var(--text-primary);
    --text-gold: var(--metal-bright);
    --text-gold-dim: var(--metal);
    --brass: var(--metal);
    --brass-light: var(--metal-bright);
    --line-quiet: var(--line);
    --line-lit: var(--metal-bright);
    --success-lit: var(--success);
    --frame-shadow: inset 0 1px 0 color-mix(in oklch, var(--text-primary) 20%, transparent), inset 0 0 0 4px color-mix(in oklch, var(--surface-deep) 78%, transparent), 0 14px 40px color-mix(in oklch, var(--surface-deep) 75%, transparent);
}

:root[data-theme='solarium'] { color-scheme: light; }
:root[data-theme='vespers'], :root[data-theme='guildhall'] { color-scheme: dark; }

body {
    color: var(--text-primary);
    background: var(--surface-deep);
    font-family: var(--font-body);
}

body::before { filter: var(--backdrop-filter); transition: filter 260ms var(--ease); }

h1, h2, h3, .wordmark, .boot-wordmark, .chrome-home, .admire-title, #win-message {
    color: var(--metal-bright);
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-transform);
}

button, .button-alt, .help-btn, .quit-btn, .howto-toggle, .sound-toggle,
.subtitle, .screen-kicker, .leaderboard-kicker, .game-info {
    font-family: var(--font-ui);
}

button, .button-alt, .help-btn, .quit-btn, .howto-toggle, .sound-toggle {
    border-color: var(--metal);
    border-radius: var(--control-radius);
    color: var(--control-ink);
    background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
}

button:hover, .button-alt:hover, .help-btn:hover, .quit-btn:hover, .sound-toggle:hover {
    border-color: var(--metal-bright);
    color: var(--control-ink);
    background: linear-gradient(180deg, var(--control-hover-top), var(--control-hover-bottom));
}

button:focus-visible, .btn-link:focus-visible { outline-color: var(--focus); }

.menu-primary, .win-primary, .pack-buy, .ad-action,
.gallery-filter.is-active, .leaderboard-tab.is-active {
    color: var(--accent-ink);
    border-color: var(--metal-bright);
    background: linear-gradient(180deg, var(--primary-top), var(--primary-bottom));
}

.menu-primary:hover, .win-primary:hover, .pack-buy:hover, .ad-action:hover,
.gallery-filter.is-active:hover, .leaderboard-tab.is-active:hover {
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--primary-hover-top), var(--primary-hover-bottom));
}

.screen-kicker, .leaderboard-kicker, .pack-theme,
.daily-status, .clue-row.is-solved, .clue-col.is-solved { color: var(--metal-bright); }
.gallery-heading .subtitle, .leaderboard-heading p, .leaderboard-note,
#screen-store > .subtitle, #screen-store > .store-intro { color: var(--backdrop-copy); }
.gallery-filter, .leaderboard-tab {
    color: var(--control-ink);
    background: linear-gradient(180deg, var(--control-top), var(--control-bottom));
}

.restoration-frame, .leaderboard-shell, .admire-card, .ad-card, .fatal-card,
.premium-card, .premium-card.is-bundle {
    border-color: var(--metal);
    border-radius: var(--panel-radius);
    background: linear-gradient(145deg, var(--surface-raised), var(--surface-deep));
    color: var(--text-primary);
}

.restoration-frame { background: linear-gradient(135deg, var(--surface-raised), var(--surface) 42%, var(--surface-deep)); }
.tooltip-content, .global-toast { border-color: var(--metal); background: var(--surface-deep); color: var(--text-primary); }
.gallery-toolbar { border-color: var(--line); background: color-mix(in oklch, var(--surface-deep) 90%, transparent); }

.level-card {
    border-color: var(--metal);
    border-radius: var(--window-radius);
    background: var(--surface-deep);
}
.level-card:hover { background: var(--surface); }
.level-card-info { background: linear-gradient(180deg, var(--surface-raised), var(--surface-deep)); }
.level-thumb { background: radial-gradient(ellipse at 50% 65%, var(--accent), var(--surface-deep)); }
.level-thumb-art.is-preview, .level-thumb-art.is-locked {
    border-color: var(--metal);
    background-image: repeating-conic-gradient(from 45deg, var(--accent) 0 25%, var(--surface-raised) 0 50%);
}

#game-container { border-color: var(--metal); background: var(--surface-board); }
.clue-row, .clue-col { color: var(--text-primary); background: var(--surface-raised); }
.cell { background: linear-gradient(145deg, var(--empty-pane-top), var(--empty-pane-bottom)); }
.cell:hover { background: color-mix(in oklch, var(--empty-pane-top) 78%, var(--metal-bright)); }
.cell.marked { background: var(--marked-pane); }
.cell.marked::after { color: var(--marked-ink); }
.cell.mistake { background: color-mix(in oklch, var(--danger) 64%, var(--empty-pane-top)); }
.cell.kb-focus { outline-color: var(--focus); }
.progress-track { border-color: var(--line); background: var(--surface-deep); }
#progress-bar { background: linear-gradient(90deg, var(--metal), var(--metal-bright)); }

body.screen-menu-active:not([data-slice]) {
    background: var(--surface-deep);
    --title-ivory: var(--menu-ink);
    --title-gold: var(--metal-bright);
}
.title-art img, .boot-art img { filter: var(--backdrop-filter); transition: filter 260ms var(--ease); }
.title-art::after, .boot-art::after { background: var(--menu-overlay); }
#screen-menu .title-content h1.wordmark, .boot-wordmark { color: var(--menu-ink); font-family: var(--font-display); }
#screen-menu .wordmark > span:last-child, .boot-wordmark > span:last-child {
    display: inline;
    font-size: 1em;
    line-height: inherit;
    letter-spacing: inherit;
}
.title-actions button, body.screen-menu-active:not([data-slice]) .utility-dock button {
    border-color: color-mix(in oklch, var(--metal) 70%, transparent);
    color: var(--menu-ink);
    background: var(--menu-control);
}
.title-actions button:hover, body.screen-menu-active:not([data-slice]) .utility-dock button:hover {
    border-color: var(--metal-bright);
    color: var(--menu-ink);
    background: var(--menu-control-hover);
}
.title-actions #daily-button {
    color: var(--accent-ink);
    border-color: var(--metal-bright);
    background: linear-gradient(115deg, var(--primary-top), var(--primary-bottom));
}
.title-actions #daily-button:hover { background: linear-gradient(115deg, var(--primary-hover-top), var(--primary-hover-bottom)); }
.title-links button { color: var(--menu-ink); background: var(--menu-control); border: 1px solid var(--metal); border-radius: var(--control-radius); padding-inline: 14px; }
.title-links button:hover { color: var(--menu-ink); background: var(--menu-control-hover); border-color: var(--metal-bright); }
.title-link-divider { background: color-mix(in oklch, var(--menu-muted) 50%, transparent); }
#screen-menu .daily-status, .boot-status { color: var(--menu-muted); }
.boot-loader { color: var(--menu-ink); background: var(--surface-deep); }
.boot-progress { background: color-mix(in oklch, var(--menu-muted) 28%, transparent); }
.boot-progress span { background: linear-gradient(90deg, transparent, var(--metal-bright), transparent); }

/* Each study changes more than hue: shape and typographic behavior carry the idea. */
:root[data-theme='solarium'] .restoration-frame,
:root[data-theme='solarium'] .premium-card,
:root[data-theme='solarium'] .leaderboard-shell { box-shadow: 0 12px 34px oklch(34% .055 159 / .18), inset 0 1px color-mix(in oklch, var(--text-primary) 12%, transparent); }
:root[data-theme='solarium'] .screen-kicker,
:root[data-theme='solarium'] .leaderboard-kicker,
:root[data-theme='solarium'] .pack-theme { letter-spacing: .13em; }
:root[data-theme='solarium'] .frame-ornament { border-radius: 50%; }
:root[data-theme='guildhall'] .restoration-frame,
:root[data-theme='guildhall'] .premium-card,
:root[data-theme='guildhall'] .leaderboard-shell { box-shadow: 7px 8px 0 color-mix(in oklch, var(--surface-deep) 82%, transparent), inset 0 1px color-mix(in oklch, var(--metal-bright) 20%, transparent); }
:root[data-theme='guildhall'] .screen-kicker,
:root[data-theme='guildhall'] .leaderboard-kicker,
:root[data-theme='guildhall'] .pack-theme { letter-spacing: .24em; }
:root[data-theme='guildhall'] .title-actions button { text-transform: uppercase; letter-spacing: .085em; }

@media (max-width: 700px), (max-width: 900px) and (orientation: portrait) {
    .title-art::after, .boot-art::after {
        background: linear-gradient(180deg, transparent 8%, color-mix(in oklch, var(--surface-deep) 42%, transparent) 35%, var(--surface-deep) 100%);
    }


}

@media (prefers-reduced-motion: reduce) {
    body::before, .title-art img, .boot-art img { transition: none; }
}