/**
 * Design tokens. Every colour, size, radius and duration in the project comes
 * from here — nothing downstream hardcodes a hex or a px font size.
 *
 * The palette is a dim laboratory: deep blue-greys, with one warm amber accent
 * for "you did the thing" and a cyan for interactive surfaces.
 */

:root {
  color-scheme: dark light;

  /* --- Surfaces ---------------------------------------------------- */
  --bg: #0e1320;
  --bg-deep: #090d17;
  --surface: #161d2e;
  --surface-raised: #1d2639;
  --surface-sunken: #111725;
  --border: #2a3448;
  --border-strong: #3a4763;

  /* --- Ink ---------------------------------------------------------- */
  --ink: #e8edf7;
  --ink-muted: #9aa6bf;
  --ink-faint: #6b7793;
  --ink-inverse: #0e1320;

  /* --- Accents ------------------------------------------------------ */
  --accent: #4dd0e1;           /* interactive: buttons, focus, links */
  --accent-hover: #7ee0ee;
  --accent-ink: #06232a;
  --accent-soft: #14303a;

  --gold: #f2b544;             /* achievement, stars, completion */
  --gold-soft: #3a2c10;

  --ok: #5fd68a;
  --ok-soft: #12301f;
  --warn: #f0a04b;
  --warn-soft: #34240f;
  --danger: #f2706b;
  --danger-soft: #35181a;

  /* --- Puzzle-specific palette -------------------------------------- */
  --tile: #223049;
  --tile-wall: #0c1220;
  --tile-goal: var(--gold-soft);
  --robot: var(--accent);
  --beam: #ffffff;

  /* Six hues used for memory tiles and logic-grid categories. Chosen to
     stay distinguishable for the common colour-vision deficiencies — every
     place they appear also carries a shape or a label, never colour alone. */
  --hue-1: #4dd0e1;
  --hue-2: #f2b544;
  --hue-3: #b48ce8;
  --hue-4: #5fd68a;
  --hue-5: #f2706b;
  --hue-6: #7aa7ff;

  /* --- Type --------------------------------------------------------- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale: readable at 320px, comfortable at 1280px. */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem);
  --step-0:  clamp(0.94rem, 0.90rem + 0.20vw, 1.04rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.38vw, 1.36rem);
  --step-2:  clamp(1.35rem, 1.20rem + 0.72vw, 1.80rem);
  --step-3:  clamp(1.62rem, 1.36rem + 1.24vw, 2.40rem);
  --step-4:  clamp(1.94rem, 1.52rem + 2.00vw, 3.20rem);

  --leading-tight: 1.2;
  --leading: 1.55;

  /* --- Space -------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Shape -------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow: 0 4px 16px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.45);

  /* --- Motion ------------------------------------------------------- */
  --fast: 120ms;
  --normal: 220ms;
  --slow: 420ms;
  --ease: cubic-bezier(0.32, 0.72, 0.36, 1);

  /* --- Layout ------------------------------------------------------- */
  --measure: 62ch;
  --page-max: 1100px;

  /* WCAG 2.2 SC 2.5.8 requires 24px; 44 is the number that is actually
     comfortable on a phone, so that is the floor used throughout. */
  --touch-min: 44px;

  --focus-ring: 3px solid var(--accent);
  --focus-offset: 2px;
}

/* The game is designed dark. Light mode keeps the same structure and swaps
   the surfaces, so contrast ratios hold in both. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f4f9;
    --bg-deep: #e6eaf3;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #eceff6;
    --border: #d3d9e6;
    --border-strong: #b4bdd0;

    --ink: #131a29;
    --ink-muted: #4f5a72;
    --ink-faint: #75809a;
    --ink-inverse: #ffffff;

    --accent: #0e7c8c;
    --accent-hover: #0a606d;
    --accent-ink: #ffffff;
    --accent-soft: #dcf2f6;

    --gold: #a16c05;
    --gold-soft: #fcf0d8;

    --ok: #1c7a45;
    --ok-soft: #dff3e6;
    --warn: #8a5406;
    --warn-soft: #fdeed8;
    --danger: #b3302c;
    --danger-soft: #fce3e2;

    --tile: #dde4f0;
    --tile-wall: #97a2b8;
    --robot: #0e7c8c;
    --beam: #131a29;

    --hue-1: #0e7c8c;
    --hue-2: #a16c05;
    --hue-3: #6b3fa8;
    --hue-4: #1c7a45;
    --hue-5: #b3302c;
    --hue-6: #2a5ec4;

    --shadow-sm: 0 1px 2px rgb(20 30 50 / 0.10);
    --shadow: 0 4px 16px rgb(20 30 50 / 0.10);
    --shadow-lg: 0 12px 40px rgb(20 30 50 / 0.16);
  }
}

/* Explicit overrides win over the media query in both directions. */
:root[data-theme="light"] {
  --bg: #f2f4f9;
  --bg-deep: #e6eaf3;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eceff6;
  --border: #d3d9e6;
  --border-strong: #b4bdd0;
  --ink: #131a29;
  --ink-muted: #4f5a72;
  --ink-faint: #75809a;
  --ink-inverse: #ffffff;
  --accent: #0e7c8c;
  --accent-hover: #0a606d;
  --accent-ink: #ffffff;
  --accent-soft: #dcf2f6;
  --gold: #a16c05;
  --gold-soft: #fcf0d8;
  --ok: #1c7a45;
  --ok-soft: #dff3e6;
  --warn: #8a5406;
  --warn-soft: #fdeed8;
  --danger: #b3302c;
  --danger-soft: #fce3e2;
  --tile: #dde4f0;
  --tile-wall: #97a2b8;
  --robot: #0e7c8c;
  --beam: #131a29;
  --hue-1: #0e7c8c;
  --hue-2: #a16c05;
  --hue-3: #6b3fa8;
  --hue-4: #1c7a45;
  --hue-5: #b3302c;
  --hue-6: #2a5ec4;
}

/* Honour the OS setting rather than animating regardless (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 1ms;
    --normal: 1ms;
    --slow: 1ms;
  }
}