/* MoWoB design tokens. Everything else in the site consumes these. */

:root {
  /* Surfaces */
  --bg: #050510;
  --bg-elev: #0b0c1d;
  --bg-panel: #101226;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-lit: rgba(255, 255, 255, 0.18);

  /* Ink. Three steps, and every one of them has to be readable, because the tone hierarchy is
     doing the work a second colour would otherwise do.

     --text-faint was #5c6180, which measured 3.36:1 on --bg and 3.15:1 over the glass panels.
     WCAG AA wants 4.5:1 for text this size, and it was carrying real content: the form's field
     labels, the stat captions under the numbers, the quote attributions and the footer line.
     #787da0 measures 5.0:1 on --bg and 4.8:1 on --bg-elev while staying a clear step below
     --text-dim, so the before/after tone language still reads. */
  --text: #eef0ff;      /* 18.1:1 on --bg */
  --text-dim: #8b90ad;  /*  6.5:1 */
  --text-faint: #787da0; /*  5.0:1 */

  /* Accent, ONE colour, and it means "you can act on this".
     Links, buttons, focus rings, the live/shipped state. Nothing decorative is ever accent, and
     nothing that isn't interactive borrows it. A single accent on an ink page makes the calls to
     action unmissable; five hues made them invisible. */
  --accent: #5b8cff;
  --accent-dim: rgba(91, 140, 255, 0.55);
  --accent-soft: rgba(91, 140, 255, 0.1);
  --accent-glow: rgba(91, 140, 255, 0.32);

  /* Before/after is carried by TONE, not by hue: broken things sit back in --text-faint and
     dashed strokes, finished things come forward in --text and the accent. */

  /* Fluid type */
  --fs-hero: clamp(2.6rem, 7vw + 0.5rem, 6.5rem);
  --fs-h2: clamp(1.9rem, 3.5vw + 0.5rem, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 0.95rem, 1.35rem);
  --fs-body: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.65;

  /* Type stacks */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: clamp(3rem, 6vw, 6rem);
  --space-5: clamp(5rem, 10vw, 10rem);

  /* Shape */
  --radius-sm: 0.625rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  --container: min(1200px, 92vw);
  --container-narrow: min(820px, 92vw);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
  --dur-slow: 0.8s;

  /* Depth */
  --shadow-glow: 0 0 60px var(--accent-glow);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.5);

  --z-grain: 1;
  --z-nav: 100;
  --z-cursor: 9999;
}