/*
  Single source of truth for the whole site's visual language.
  Every other stylesheet should reference these custom properties —
  never a hardcoded hex color or font name outside this file.

  Theme: "glam 8-bit" — dusty rose, lavender, champagne gold and muted teal
  on deep plum. Still pixel art, but dressed for an evening out.
*/
:root {
  /* ---- Core palette ---- */
  --color-plum-deep: #150b1e;  /* darkest plum: wells, vignette, shadows */
  --color-bg: #1e1229;         /* page background — deep plum */
  --color-bg-raised: #2c1a3d;  /* panels, text boxes */
  --color-surface: #3d2654;    /* sprite wells, gradient top-lights */
  --color-border: #75558f;     /* quiet hairlines (ghost buttons, wells) */
  --color-text: #f9eff3;       /* blush white */
  --color-text-dim: #c3b3d8;   /* soft lavender grey */

  --color-accent-rose: #e8a3b8;      /* dusty rose — Level 1 / base accent */
  --color-accent-lavender: #b8a2ea;  /* lavender — Level 2 */
  --color-accent-gold: #f2d898;      /* soft champagne gold */
  --color-accent-teal: #7cc3b8;      /* muted teal — Level 3 */

  /* Functional states. Deliberately far apart in hue AND lightness so they
     stay distinguishable in a soft palette: pale gold (light, warm yellow)
     for success/correct vs. garnet rose (mid-dark, red-pink) for error. */
  --color-accent-success: var(--color-accent-gold);
  --color-accent-error: #d4546f;

  /* Frames around media (scene stage, puzzle board, loading bar). */
  --color-frame: var(--color-accent-gold);

  /* ---- Per-level accent tokens ----
     Each level overrides --accent to one of these in its own levelN.css,
     so shared components (buttons, intro screen, HUD) restyle per-level
     by changing exactly one line, with zero edits to shared CSS/JS. */
  --accent-level1: var(--color-accent-rose);      /* Lucknow - dusty rose */
  --accent-level2: var(--color-accent-lavender);  /* Kurukshetra - placeholder, pick later */
  --accent-level3: var(--color-accent-teal);      /* Bangalore - placeholder, pick later */

  /* Generic accent used by all shared components; default to level 1's.
     Pages override this at :root scope (see levelN.css) or dynamically
     via element.style.setProperty('--accent', ...) for JS-driven cases.
     Accent-colored glows are therefore written per-rule as
     color-mix(in srgb, var(--accent) var(--glow-alpha), transparent)
     so they follow an element-level --accent override. */
  --accent: var(--accent-level1);

  /* ---- Soft ambiance (all derived from the palette) ---- */
  --glow-alpha: 38%;        /* strength of accent glows around key UI */
  --glow-alpha-strong: 60%; /* hover / emphasis */
  --color-shadow: color-mix(in srgb, var(--color-plum-deep) 85%, transparent);
  --color-seam: color-mix(in srgb, var(--color-plum-deep) 45%, transparent);
  --color-scrim: color-mix(in srgb, var(--color-plum-deep) 80%, transparent);
  --fx-scanline: color-mix(in srgb, var(--color-plum-deep) 6%, transparent);
  --fx-bloom: color-mix(in srgb, var(--color-accent-rose) 9%, transparent);
  --fx-vignette: color-mix(in srgb, var(--color-plum-deep) 55%, transparent);
  /* The puzzle photo's own retro layer (sliding-puzzle.css): stronger than the
     page-wide one above, which is too faint to read over a photograph. */
  --fx-photo-scanline: color-mix(in srgb, var(--color-plum-deep) 90%, transparent);
  --fx-photo-bloom: color-mix(in srgb, var(--color-accent-rose) 40%, transparent);
  --fx-photo-vignette: color-mix(in srgb, var(--color-plum-deep) 42%, transparent);

  /* ---- Typography ----
     --font-pixel: buttons, labels, hints, small headers (always Press Start 2P).
     The reading/heading font is a switchable THEME: pick it in
     shared/js/font.config.js (one `active:` line, or ?font=name in the URL).
     That file sets the --font-text / --font-title tokens below on <html>, so
     they override these values. The values here are only the CSS fallback
     (what you get if that script fails), and they mirror the default theme.
     Components never name a font — they only read these tokens:
       *-scale      multiplies each component's base size (1 = the original sizes)
       *-weight     font-weight for narration/dialogue (text) and headings (title)
       title-tracking  extra letter-spacing (em) added to each heading's own spacing
       text-lh      line-height for narration/dialogue (unitless)
       text-style   normal | italic (pixel fonts have no italic: keep normal) */
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-text: 'Pixelify Sans', ui-monospace, monospace;
  --font-title: 'Pixelify Sans', ui-monospace, monospace;
  --font-text-weight: 500;
  --font-title-weight: 500;
  --font-text-scale: 0.96;
  --font-title-scale: 0.86;
  --font-title-tracking: 0.03em;
  --font-text-lh: 1.45;
  --font-text-style: normal;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* ---- Misc ---- */
  --border-width: 3px;
  --radius: 0px; /* sharp corners everywhere — pixel-art aesthetic */

  /* Hard pixel drop-shadow, now a deep plum rather than black. Components
     add their own soft accent glow next to it. */
  --shadow-pixel: 4px 4px 0 var(--color-shadow);
  --shadow-pixel-lift: 6px 6px 0 var(--color-shadow);
  --shadow-pixel-press: 1px 1px 0 var(--color-shadow);
}