/* Cluecraft theme + seasonal overlay values.
   Everything a theme does is set --ui-* variables. No layout lives here.

   Layer order is declared once, in tokens.css (loaded first). This file adds
   rules to the `theme` and `seasonal` layers only.

   §13.3 step 5: this file introduces **no colour literal of its own** (§3.3,
   strict rule). Each theme assigns the §3.6 semantic roles from the colour
   primitives declared in tokens.css; the palette lives there once. Fonts and
   radii are set to the same values as before, so the rendered result is
   unchanged (proven by the computed-style snapshot compare). */

@layer theme {
[data-theme="medieval"] {
  --ui-color-bg: var(--ui-color-medieval-950);
  --ui-color-surface: var(--ui-color-medieval-900);
  --ui-color-border: var(--ui-color-medieval-750);
  --ui-color-text: var(--ui-color-medieval-500);
  --ui-color-text-muted: var(--ui-color-medieval-600);
  --ui-color-heading: var(--ui-color-medieval-550);
  --ui-color-accent: var(--ui-color-medieval-650);
  /* §11.3 / §3.6: the focus indicator. A themed role, so it contrasts with
     this theme's own surfaces; the lightest rung reads as a ring on every dark
     surface (common.css draws it). */
  --ui-color-focus: var(--ui-color-medieval-450);
  --ui-font-family-heading: Georgia, serif;
  --ui-radius-lg: 12px;
  --ui-color-control-bg: var(--ui-color-medieval-800);
  --ui-color-control-text: var(--ui-color-medieval-500);
  --ui-color-control-border: var(--ui-color-medieval-750);
  --ui-color-control-hover: var(--ui-color-medieval-750);
  --ui-color-cell-bg: var(--ui-color-medieval-850);
  --ui-color-cell-border: var(--ui-color-medieval-750);
  /* §11.4 / check I: cell-text paints real text — the sudoku slot's coordinate
     label (15px, normal) and the `_` placeholder (24px, large). On cell-bg it
     must clear 4.5:1, not 3:1, so the rung is the first that does (700 -> 600,
     2.42 -> 4.58). */
  --ui-color-cell-text: var(--ui-color-medieval-600);
  --ui-color-cell-filled-bg: var(--ui-color-medieval-800);
  --ui-color-cell-filled-text: var(--ui-color-medieval-450);
}

[data-theme="georgian"] {
  --ui-color-bg: var(--ui-color-georgian-950);
  --ui-color-surface: var(--ui-color-georgian-900);
  --ui-color-border: var(--ui-color-georgian-700);
  --ui-color-text: var(--ui-color-georgian-400);
  --ui-color-text-muted: var(--ui-color-georgian-550);
  --ui-color-heading: var(--ui-color-georgian-500);
  --ui-color-accent: var(--ui-color-georgian-650);
  --ui-color-focus: var(--ui-color-georgian-400);
  --ui-font-family-heading: Georgia, serif;
  --ui-radius-lg: 10px;
  --ui-color-control-bg: var(--ui-color-georgian-800);
  --ui-color-control-text: var(--ui-color-georgian-400);
  --ui-color-control-border: var(--ui-color-georgian-700);
  --ui-color-control-hover: var(--ui-color-georgian-750);
  --ui-color-cell-bg: var(--ui-color-georgian-850);
  --ui-color-cell-border: var(--ui-color-georgian-700);
  /* §11.4 / check I: 600 was 3.29:1 on cell-bg — large-text-only, but the
     sudoku slot label is normal text. 550 -> 5.52:1. */
  --ui-color-cell-text: var(--ui-color-georgian-550);
  --ui-color-cell-filled-bg: var(--ui-color-georgian-800);
  --ui-color-cell-filled-text: var(--ui-color-georgian-450);
}

[data-theme="victorian"] {
  --ui-color-bg: var(--ui-color-victorian-950);
  --ui-color-surface: var(--ui-color-victorian-900);
  --ui-color-border: var(--ui-color-victorian-650);
  --ui-color-text: var(--ui-color-victorian-400);
  --ui-color-text-muted: var(--ui-color-victorian-550);
  --ui-color-heading: var(--ui-color-victorian-500);
  --ui-color-accent: var(--ui-color-victorian-700);
  --ui-color-focus: var(--ui-color-victorian-400);
  --ui-font-family-heading: Georgia, serif;
  --ui-radius-lg: 6px;
  --ui-color-control-bg: var(--ui-color-victorian-800);
  --ui-color-control-text: var(--ui-color-victorian-400);
  --ui-color-control-border: var(--ui-color-victorian-650);
  --ui-color-control-hover: var(--ui-color-victorian-750);
  --ui-color-cell-bg: var(--ui-color-victorian-850);
  --ui-color-cell-border: var(--ui-color-victorian-650);
  /* §11.4 / check I: 600 was 2.65:1 on cell-bg. 550 -> 5.01:1. */
  --ui-color-cell-text: var(--ui-color-victorian-550);
  --ui-color-cell-filled-bg: var(--ui-color-victorian-800);
  --ui-color-cell-filled-text: var(--ui-color-victorian-450);
}

[data-theme="modern"] {
  --ui-color-bg: var(--ui-color-modern-950);
  --ui-color-surface: var(--ui-color-modern-900);
  --ui-color-border: var(--ui-color-modern-700);
  --ui-color-text: var(--ui-color-modern-400);
  --ui-color-text-muted: var(--ui-color-modern-550);
  --ui-color-heading: var(--ui-color-modern-500);
  --ui-color-accent: var(--ui-color-modern-600);
  --ui-color-focus: var(--ui-color-modern-400);
  --ui-font-family-heading: system-ui, sans-serif;
  --ui-radius-lg: 16px;
  --ui-color-control-bg: var(--ui-color-modern-800);
  --ui-color-control-text: var(--ui-color-modern-400);
  --ui-color-control-border: var(--ui-color-modern-700);
  --ui-color-control-hover: var(--ui-color-modern-750);
  --ui-color-cell-bg: var(--ui-color-modern-850);
  --ui-color-cell-border: var(--ui-color-modern-700);
  /* §11.4 / check I: 650 was 2.18:1 on cell-bg. 550 -> 4.67:1. */
  --ui-color-cell-text: var(--ui-color-modern-550);
  --ui-color-cell-filled-bg: var(--ui-color-modern-800);
  --ui-color-cell-filled-text: var(--ui-color-modern-450);
}
}

@layer seasonal {
[data-season="christmas"] { --ui-color-accent: var(--ui-color-christmas-950); --ui-color-heading: var(--ui-color-christmas-900); }
[data-season="halloween"] { --ui-color-accent: var(--ui-color-halloween-950); --ui-color-heading: var(--ui-color-halloween-900); }
[data-season="easter"] { --ui-color-accent: var(--ui-color-easter-950); --ui-color-heading: var(--ui-color-easter-900); }
[data-season="winter"] { --ui-color-accent: var(--ui-color-winter-950); --ui-color-heading: var(--ui-color-winter-900); }

[data-season="christmas"] .ui-stage,
[data-season="halloween"] .ui-stage,
[data-season="easter"] .ui-stage,
[data-season="winter"] .ui-stage {
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--ui-color-accent) 18%, transparent);
}
}