/* Wanovix design tokens.
   Working values, not the brand: taken from William's brand handoff of
   7 October 2026 (exploration only). Dark is direction B, graphite with
   orange ("absolutely love how it goes with orange"); light is direction A,
   bone with orange, with cobalt kept structural (focus, the second data
   series). The Design Lab replaces values here and nothing else; the names
   stay. Read by the dashboard, the site and the lab. */

:root {
  color-scheme: light;

  /* Type. Inter for running text and data; Archivo (the brand handoff's
     leaning) for the display voice: titles and big figures, set a touch
     narrow through its width axis so figures stand tall in a tile. */
  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo Variable", var(--font-sans);
  --display-stretch: 87.5%;
  --display-weight: 650;
  --display-tracking: -0.02em;
  /* The wordmark: Archivo condensed bold in caps, the handoff's variant #2. */
  --wordmark-stretch: 62%;
  --wordmark-weight: 700;
  --label-weight: 600;
  --label-tracking: 0.06em;

  /* Scale: ratio 1.2 from 16 px. On a phone nothing is below 16 px; from
     1024 px the two small steps go to 14 and 13 px for dense data. */
  --text-xs: 1rem;
  --text-sm: 1rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.488rem;
  --text-4xl: 3.583rem;
  --leading: 1.5;
  --leading-tight: 1.15;
  --measure: 68ch;

  --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: 4.5rem;

  /* Tiles: square-ish modules with thin joints (William: "thin joints"). */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --joint: 1px;
  --tap: 44px;
  --rail: 15.5rem;
  --bar: 3.5rem;

  /* Light: bone ground, chalk tiles, graphite ink, orange spark. */
  --bg: oklch(94.9% 0.015 90.2);
  --grout: oklch(86.5% 0.02 87.5);
  --surface: oklch(97.6% 0.008 90);
  --surface-2: oklch(92.6% 0.016 88);
  --surface-3: oklch(89.5% 0.018 87);
  --line: oklch(87.7% 0.02 87.5);
  --line-strong: oklch(58% 0.012 85);
  --text: oklch(28.5% 0.004 84.6);
  --text-muted: oklch(44% 0.01 91.6);
  --accent: oklch(70.4% 0.191 44.5);
  --accent-strong: oklch(76% 0.165 52);
  --accent-soft: oklch(91% 0.05 55);
  --accent-text: oklch(48% 0.15 40);
  --on-accent: oklch(28.5% 0.004 84.6);
  --info: oklch(45% 0.18 266);
  --info-soft: oklch(91% 0.04 266);
  --focus: oklch(45% 0.19 266);

  /* States, each with its own hue and always with its word beside it. */
  --run: var(--accent-text);
  --ok: oklch(46% 0.11 150);
  --ok-soft: oklch(92% 0.045 150);
  --warn: oklch(47% 0.1 70);
  --warn-soft: oklch(92% 0.06 88);
  --stop: oklch(46% 0.17 27);
  --stop-soft: oklch(93% 0.035 27);
  --on-stop: oklch(97.6% 0.008 90);

  --shadow: 0 1px 2px oklch(28% 0.01 80 / 0.08), 0 8px 24px oklch(28% 0.01 80 / 0.08);
  --scrim: oklch(20% 0.004 84.6 / 0.55);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --motion: var(--dur) var(--ease-out);
}

@media (min-width: 1024px) {
  :root {
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
  }
}

/* Dark: graphite ground and tiles, bone ink, orange spark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(25.2% 0.004 84.6);
    --grout: oklch(21.5% 0.004 84.6);
    --surface: oklch(28.5% 0.004 84.6);
    --surface-2: oklch(31.5% 0.005 84.6);
    --surface-3: oklch(35% 0.005 84.6);
    --line: oklch(36% 0.005 84.6);
    --line-strong: oklch(60% 0.01 85);
    --text: oklch(94.9% 0.015 90.2);
    --text-muted: oklch(80% 0.016 88);
    --accent: oklch(73.1% 0.176 49.2);
    --accent-strong: oklch(78% 0.16 52);
    --accent-soft: oklch(34% 0.06 49);
    --accent-text: oklch(76% 0.16 52);
    --on-accent: oklch(25.2% 0.004 84.6);
    --info: oklch(74% 0.09 268);
    --info-soft: oklch(33% 0.045 268);
    --focus: oklch(84% 0.13 88);
    --ok: oklch(78% 0.13 150);
    --ok-soft: oklch(31% 0.045 150);
    --warn: oklch(85% 0.13 88);
    --warn-soft: oklch(33% 0.05 85);
    --stop: oklch(70% 0.17 27);
    --stop-soft: oklch(32% 0.07 27);
    --on-stop: oklch(21.5% 0.004 84.6);
    --shadow: 0 1px 2px oklch(0% 0 0 / 0.35), 0 12px 32px oklch(0% 0 0 / 0.35);
    --scrim: oklch(12% 0.004 84.6 / 0.7);
  }
}

/* The same values when the page asks for dark itself. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(25.2% 0.004 84.6);
  --grout: oklch(21.5% 0.004 84.6);
  --surface: oklch(28.5% 0.004 84.6);
  --surface-2: oklch(31.5% 0.005 84.6);
  --surface-3: oklch(35% 0.005 84.6);
  --line: oklch(36% 0.005 84.6);
  --line-strong: oklch(60% 0.01 85);
  --text: oklch(94.9% 0.015 90.2);
  --text-muted: oklch(80% 0.016 88);
  --accent: oklch(73.1% 0.176 49.2);
  --accent-strong: oklch(78% 0.16 52);
  --accent-soft: oklch(34% 0.06 49);
  --accent-text: oklch(76% 0.16 52);
  --on-accent: oklch(25.2% 0.004 84.6);
  --info: oklch(74% 0.09 268);
  --info-soft: oklch(33% 0.045 268);
  --focus: oklch(84% 0.13 88);
  --ok: oklch(78% 0.13 150);
  --ok-soft: oklch(31% 0.045 150);
  --warn: oklch(85% 0.13 88);
  --warn-soft: oklch(33% 0.05 85);
  --stop: oklch(70% 0.17 27);
  --stop-soft: oklch(32% 0.07 27);
  --on-stop: oklch(21.5% 0.004 84.6);
  --shadow: 0 1px 2px oklch(0% 0 0 / 0.35), 0 12px 32px oklch(0% 0 0 / 0.35);
  --scrim: oklch(12% 0.004 84.6 / 0.7);
}

/* White: the main colour of the public site (William, 15 October). The ink
   is graphite, orange is a fill, a line or a mark and never text; the raised
   surfaces take a trace of the orange so they read warm, not grey; the focus
   ring is the ink, as in the Design Lab. Asked for with data-ground="white"
   on a page that is light (data-theme="light"). */
:root[data-ground="white"] {
  color-scheme: light;
  --bg: oklch(100% 0 0);
  --grout: oklch(95.5% 0.02 49);
  --surface: oklch(97.5% 0.018 49);
  --surface-2: oklch(94.5% 0.025 49);
  --surface-3: oklch(92% 0.03 49);
  --line: oklch(89% 0.021 49);
  --line-strong: oklch(58% 0.012 85);
  --text: oklch(28.5% 0.004 84.6);
  --text-muted: oklch(46% 0.008 84.6);
  --accent: oklch(73.1% 0.176 49.2);
  --accent-strong: oklch(68% 0.18 46);
  --accent-soft: oklch(94% 0.04 49);
  --accent-text: oklch(52% 0.15 42);
  --on-accent: oklch(28.5% 0.004 84.6);
  --focus: oklch(28.5% 0.004 84.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --motion: 0ms linear; }
}