/* ==========================================================================
   WIDGET 27 · Brand tokens
   The only place colours, fonts, sizes and spacing are defined.
   Documented in docs/spec/01-brand.md. Change both together.
   ========================================================================== */

:root {
  /* Colour: dark surfaces */
  --c-bg: #14171C;          /* Machine Graphite: page background */
  --c-surface: #1E232B;     /* Graphite Panel: cards, header, dropdowns */
  --c-surface-2: #262C36;   /* Raised Panel: hover, inputs */
  --c-line: #323A46;        /* Seam: borders, dividers */
  --c-text: #F2F4F5;        /* Spec Sheet White: body text on dark */
  --c-muted: #9AA3AE;       /* Steel: secondary text on dark */

  /* Colour: action and information */
  --c-green: #B4F000;       /* Hi-Vis Green: action only */
  --c-green-hover: #C8FF2E;
  --c-green-ink: #14171C;   /* Text on green */
  --c-blue: #3D7BFF;        /* Blueprint Blue: maps, data, focus */
  --c-blue-text: #7FA6FF;   /* Blueprint Blue for text links on dark (AA) */

  /* Colour: light sections */
  --c-paper: #F4F3EE;       /* Paper */
  --c-paper-line: #DCDAD2;
  --c-paper-text: #14171C;  /* Graphite Ink */
  --c-paper-muted: #5A6270; /* Pencil */
  --c-paper-link: #1F56D6;  /* Blueprint Blue for links on Paper (AA) */

  /* Type */
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.75rem, 1.6rem + 5vw, 4.5rem);   /* 44 → 72 px */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.25rem);  /* 36 → 52 px */
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);    /* 28 → 36 px */
  --fs-h3: 1.375rem;                                 /* 22 px */
  --fs-body: 1.0625rem;                              /* 17 px */
  --fs-small: 0.875rem;                              /* 14 px */
  --fs-label: 0.75rem;                               /* 12 px */

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Spacing (4 px base) */
  --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;
  --sp-9: 6rem;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 72px;

  /* Shape */
  --r-sm: 4px;   /* buttons, inputs */
  --r-md: 8px;   /* cards */
  --r-lg: 14px;  /* players, large panels */

  /* Effects */
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.45);
  --grid-line: rgba(127, 166, 255, 0.07); /* faint technical grid */
  --green-glow: rgba(180, 240, 0, 0.55);   /* Spotlight pulse */
  --green-glow-0: rgba(180, 240, 0, 0);
  --dim: rgba(0, 0, 0, 0.55);              /* page dimming behind a Spotlight */
  --t-fast: 150ms ease;
  --t-med: 250ms ease;
}