/* ---------------------------------------------------------------------------
   Design tokens.

   Both themes are built from the same two brand colours, but they use the sand
   differently. In dark it is the text on slate. In light it is *not* the
   reading surface: a fully saturated sand behind body text tires the eye and
   squeezes the gap between typed and untyped characters, because the ground is
   already dark enough to crowd them. So light puts the sand on the panels —
   mode bar, keyboard, chart card — and reads on warm paper instead.
   --------------------------------------------------------------------------- */

:root {
  /* --- brand palettes (never referenced directly outside this file) -------- */
  --light-bg: #faf6f0;
  --light-bg-elev: #f2e8da;
  --light-bg-sunken: #efe3d3;
  --light-border: #ddccb2;
  --light-text: #212830;
  --light-text-muted: #6d6355;
  --light-text-untyped: #8a7c66;
  --light-accent: #212830;
  --light-error: #a8392b;
  --light-shadow: rgba(33, 40, 48, 0.10);

  --dark-bg: #212830;
  --dark-bg-elev: #2a323c;
  --dark-bg-sunken: #1a2027;
  --dark-border: #39424e;
  --dark-text: #e6be9e;
  --dark-text-muted: #939cab;
  --dark-text-untyped: #6b7480;
  --dark-accent: #e6be9e;
  --dark-error: #e0695c;
  --dark-shadow: rgba(0, 0, 0, 0.32);

  /* --- active theme: light by default ------------------------------------- */
  color-scheme: light;
  --bg: var(--light-bg);
  --bg-elev: var(--light-bg-elev);
  --bg-sunken: var(--light-bg-sunken);
  --border: var(--light-border);
  --text: var(--light-text);
  --text-muted: var(--light-text-muted);
  --text-untyped: var(--light-text-untyped);
  --accent: var(--light-accent);
  --error: var(--light-error);
  --shadow: var(--light-shadow);

  /* --- typography --------------------------------------------------------- */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-type: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  --fs-stat: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-hero: clamp(3rem, 2rem + 5vw, 5rem);
  --lh-type: 1.75;

  /* --- space, shape, motion ----------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* The wordmark is a fixed sand block with slate ink in both themes — a logo
     does not re-colour itself. Slate on sand measures 8.66:1. */
  --mark-bg: #e6be9e;
  --mark-ink: #212830;

  /* No radius scale: every corner in this interface is square. */

  --dur-fast: 90ms;
  /* For things that snap to a discrete position but should slide there rather
     than jump: the caret between characters, the chart readout between
     seconds. */
  --dur-glide: 130ms;
  --dur: 160ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --measure: 62rem;
}

/* Explicit choice wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--dark-bg);
  --bg-elev: var(--dark-bg-elev);
  --bg-sunken: var(--dark-bg-sunken);
  --border: var(--dark-border);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --text-untyped: var(--dark-text-untyped);
  --accent: var(--dark-accent);
  --error: var(--dark-error);
  --shadow: var(--dark-shadow);
}

/* No stored choice: follow the operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--dark-bg);
    --bg-elev: var(--dark-bg-elev);
    --bg-sunken: var(--dark-bg-sunken);
    --border: var(--dark-border);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --text-untyped: var(--dark-text-untyped);
    --accent: var(--dark-accent);
    --error: var(--dark-error);
    --shadow: var(--dark-shadow);
  }
}