/* Cluecraft design tokens — seeds, primitives and semantic defaults.

   Layer: `tokens` (§3.1, §7.1). This file is loaded first and declares the
   canonical layer order for the whole page, so every other file — including the
   workbench's injected component CSS — only adds rules into these named layers.

   One of the two files allowed to contain literal colour values (§3.3, Q2 —
   strict rule retained); the other is materials.css.

   §13.3 step 3 introduced this file with the layer order, the `--ui-color-metal`
   seed and the neutral status/font defaults. §13.3 step 5 completes it: every
   theme/seasonal palette literal moved here from themes.css as a **primitive**
   (§3.3 "a theme palette is declared as primitive tokens in tokens.css"), and
   themes.css now assigns the §3.6 semantic roles from these primitives. See the
   migration map in the step-5 commit / CHECKPOINT for the old -> new names.

   Naming: a colour primitive is `--ui-color-<family>-<step>` (§3.2), the step a
   numeric luminance rung (950 darkest … 400 lightest) within that family. The
   family is the palette the value belongs to (a theme or a season); the value
   is the same whichever theme consumes it. */

@layer reset, tokens, material, theme, seasonal, base, components, skins, app;

@layer tokens {
:root {
  /* --- Seeds (§4.3) -------------------------------------------------------
     The one theme-tunable input the brass material derives from. The literal
     here is its neutral fallback, so a page with no theme still produces usable
     brass (§4.5 rule 4). A theme may override this seed (§4.3); no shipped theme
     does yet, so every theme renders the same brass. */
  --ui-color-metal: #b08d57;

  /* --- Colour primitives (§3.2, §3.3) ------------------------------------
     Raw values. Each theme's and season's palette lives here once; themes.css
     assigns the semantic roles from them and introduces no literal of its own. */

  /* medieval palette */
  --ui-color-medieval-950: #14100a;
  --ui-color-medieval-900: #1e160c;
  --ui-color-medieval-850: #2a1f10;
  --ui-color-medieval-800: #3a2a14;
  --ui-color-medieval-750: #4a3418;
  --ui-color-medieval-700: #6b5a3a;
  --ui-color-medieval-650: #8b6914;
  --ui-color-medieval-600: #9a8664;
  --ui-color-medieval-550: #d4a85e;
  --ui-color-medieval-500: #e8dcc0;
  --ui-color-medieval-450: #f0e0b0;

  /* georgian palette */
  --ui-color-georgian-950: #0b1410;
  --ui-color-georgian-900: #10201a;
  --ui-color-georgian-850: #16281f;
  --ui-color-georgian-800: #1c3328;
  --ui-color-georgian-750: #274433;
  --ui-color-georgian-700: #2e4a3a;
  --ui-color-georgian-650: #3f6b52;
  --ui-color-georgian-600: #5f7a66;
  --ui-color-georgian-550: #8aa08e;
  --ui-color-georgian-500: #c4a35a;
  --ui-color-georgian-450: #cfe0c8;
  --ui-color-georgian-400: #dfe8d8;

  /* victorian palette */
  --ui-color-victorian-950: #14100e;
  --ui-color-victorian-900: #211a16;
  --ui-color-victorian-850: #2a1c16;
  --ui-color-victorian-800: #3a241c;
  --ui-color-victorian-750: #4a2e22;
  --ui-color-victorian-700: #7a2e22;
  --ui-color-victorian-650: #5a3a2e;
  --ui-color-victorian-600: #7a5a48;
  --ui-color-victorian-550: #a08a76;
  --ui-color-victorian-500: #c98b4a;
  --ui-color-victorian-450: #e6c9a0;
  --ui-color-victorian-400: #ecdcc8;

  /* modern palette */
  --ui-color-modern-950: #10111a;
  --ui-color-modern-900: #1a1b2e;
  --ui-color-modern-850: #22223a;
  --ui-color-modern-800: #2a2a4a;
  --ui-color-modern-750: #38385e;
  --ui-color-modern-700: #3a3a5e;
  --ui-color-modern-650: #55557a;
  --ui-color-modern-600: #6366f1;
  --ui-color-modern-550: #8a8ab0;
  --ui-color-modern-500: #c4b5fd;
  --ui-color-modern-450: #d8d0ff;
  --ui-color-modern-400: #e0e0ee;

  /* christmas palette */
  --ui-color-christmas-950: #b21e1e;
  /* §11.4 / check I: the christmas overlay points `--ui-color-heading` at this
     rung, and heading is TEXT (`.ui-title`, decode summary/foothold, sudoku
     filled cells/slots/tiles). The original #e24b4b failed AA on the dark
     surfaces (worst 3.44 on victorian cell-filled). #e87878 is the most
     saturated red that clears 4.5:1 on every dark background (worst 4.76). */
  --ui-color-christmas-900: #e87878;

  /* halloween palette */
  --ui-color-halloween-950: #c25a12;
  --ui-color-halloween-900: #e07b2a;

  /* easter palette */
  --ui-color-easter-950: #d4779e;
  --ui-color-easter-900: #e59bc0;

  /* winter palette */
  --ui-color-winter-950: #5fa8d3;
  --ui-color-winter-900: #9ecbe8;

  /* --- Design scales (§15.1 #4, §15.2 #1) ---------------------------------
     Six scales — spacing, typography, radius, elevation, motion and
     breakpoints — "established now; exact values refined as UI appears"
     (§15.1 #4). Each rung is named for the pixel value it carries, so a
     substitution is mechanical and self-documenting; the values are exactly
     those already in use, so adopting a rung is a pure rename (no visual
     change). These are primitives (§3.1) and a component may read them
     directly: the §3.1 "read semantic/material, never primitives" rule is
     scoped to colour (enforced by check F), not to lengths. check H (warn)
     requires a scale token in place of a literal px. Elevation is the one
     scale that is not here — it shades a material, so it lives with the
     material recipes (materials.css). */

  /* spacing — padding / margin / gap */
  --ui-space-3: 3px;
  --ui-space-4: 4px;
  --ui-space-6: 6px;
  --ui-space-8: 8px;
  --ui-space-9: 9px;
  --ui-space-10: 10px;
  --ui-space-12: 12px;
  --ui-space-14: 14px;
  --ui-space-16: 16px;
  --ui-space-18: 18px;
  --ui-space-20: 20px;
  --ui-space-22: 22px;
  --ui-space-32: 32px;

  /* typography — font-size and line-height */
  --ui-font-size-11: 11px;
  --ui-font-size-12: 12px;
  --ui-font-size-13: 13px;
  --ui-font-size-14: 14px;
  --ui-font-size-15: 15px;
  --ui-font-size-16: 16px;
  --ui-font-size-17: 17px;
  --ui-font-size-18: 18px;
  --ui-font-size-20: 20px;
  --ui-font-size-24: 24px;
  --ui-font-size-40: 40px;
  --ui-font-line-height-52: 52px;
  --ui-font-line-height-72: 72px;

  /* radius — distinct from the themed `--ui-radius-lg` role (§3.6), which a
     theme sets per story and is not a fixed primitive */
  --ui-radius-6: 6px;
  --ui-radius-8: 8px;
  --ui-radius-12: 12px;

  /* elevation — depth and inset shading. Shadows paint outside or inside the box
     without affecting layout, so a skin may swap them and stay geometry-neutral
     (§6.3). The values are black/white translucency: shading, not a hue. They
     live here because colour literals are permitted only in tokens.css and
     materials.css (§3.3), and because a component CSS file may not carry one. */
  --ui-elevation-cast: 0 10px 22px rgba(0, 0, 0, 0.55);
  --ui-elevation-bevel-top: inset 0 6px 8px rgba(0, 0, 0, 0.35);
  --ui-elevation-bevel-bottom: inset 0 -6px 8px rgba(0, 0, 0, 0.25);
  --ui-elevation-text: 0 1px 3px rgba(0, 0, 0, 0.6);
  --ui-elevation-inset: inset 0 0 8px rgba(0, 0, 0, 0.45);
  --ui-elevation-highlight: rgba(255, 255, 255, 0.08);

  /* motion — durations */
  --ui-motion-duration-fast: 0.15s;
  --ui-motion-duration-base: 0.3s;
  --ui-motion-duration-shake: 0.35s;

  /* breakpoints — the declared support widths. Documentation: a CSS media or
     container query cannot read a custom property, so these record the values
     the queries in keypad.css (251px container) and workbench.css (760px
     shell) use; keep them in step by hand. */
  --ui-breakpoint-narrow: 320px;
  --ui-breakpoint-keypad: 251px;
  --ui-breakpoint-shell: 760px;

  /* --- Workbench shell palette (§13.2 #3) --------------------------------
     The workbench is development tooling, not player-facing chrome, and it is
     deliberately theme-INDEPENDENT: §2.2/§7.2 put application UI on the
     *platform* theme, which is not implemented yet (§15.2 #3), so the shell
     keeps a fixed dark palette rather than following the story theme. Its
     values are primitives here — colour literals are permitted only in
     tokens.css and materials.css (§3.3) — and workbench.css reads them, so the
     shell carries no literal of its own and the separate `--wb-*` token system
     is gone. The shell's status colours (the verdict banner and the feedback
     line) are NOT here: they use the shared status roles below. */
  --ui-color-workbench-bg: #0d0b08;
  --ui-color-workbench-panel: #17140f;
  --ui-color-workbench-line: #2c251a;
  --ui-color-workbench-text: #e6dcc4;
  /* §11.4 / check I: this rung is TEXT on the shell's dark surfaces (buttons,
     primary button, feedback line). 4.12 on the button background failed AA;
     #9a8760 clears 4.5:1 on every shell background (worst 4.77). */
  --ui-color-workbench-muted: #9a8760;
  --ui-color-workbench-accent: #d4a85e;
  --ui-color-workbench-input: #0f0c08;
  --ui-color-workbench-card: #131009;
  --ui-color-workbench-button: #241d12;
  /* §11.4 / check I: primary-button text (#14100a) on this failed AA (3.73).
     #a5761a -> 4.70 static, 5.93 on the 1.15 hover-brightness. */
  --ui-color-workbench-button-primary: #a5761a;
  --ui-color-workbench-on-primary: #14100a;
  /* §11.4 / check I: #log is 11px text on this log background; #7f6e4e was 4.04:1.
     #8f7c58 -> 4.95:1 (the log renders on no other background). */
  --ui-color-workbench-log-text: #8f7c58;
  --ui-color-workbench-log-bg: #0a0805;
  --ui-color-workbench-feedback-bg: #1a150e;

  /* --- Semantic defaults (§3.4 "defined defaults") -----------------------
     Values that are the same whichever theme applies. §13.2 #2 — this block
     used to be a hidden medieval theme; the themed roles (bg, surface, text,
     accent…) now live once, per theme, in themes.css (step 5). What stays here
     is what no theme overrides: the font/radius fallbacks and the status roles. */
  --ui-font-family-body: system-ui, sans-serif;
  --ui-font-family-heading: system-ui, sans-serif;
  --ui-radius-lg: 8px;
  /* §3.6 focus indicator, neutral fallback (§3.4). Each theme sets its own
     (themes.css); this keeps a page with no theme from losing focus visibility. */
  --ui-color-focus: #e8dcc0;

  /* Status roles (§3.6), theme-independent. The status colour and the colour to
     place on a status fill ("on-"). Values are the former --ui-success /
     --ui-feedback-* defaults, renamed (step 5). */
  --ui-color-success: #7ee08a;
  --ui-color-on-success: #123a1a;
  --ui-color-success-border: #2a6a34;
  --ui-color-danger: #e08080;
  --ui-color-on-danger: #3a1414;
  --ui-color-info: #d4a85e;
  --ui-color-on-info: #3a2a0a;
}
}