/* ============================================================
   VoiceInsights Africa — Unified Design Tokens (Milestone A)
   Additive only: every value here either restates an existing
   style.css token by reference or fills a genuine gap (spacing,
   elevation, motion, focus). Nothing here overrides an existing
   color/type/radius value — style.css remains the source of
   truth for those. Load this AFTER style.css.
   ============================================================ */

:root {
  /* Canonical semantic surfaces shared by public pages and Workspace. */
  --surface-canvas: var(--bg);
  --surface-base: var(--surface);
  --surface-raised: var(--surface-2);
  --surface-emphasis: var(--surface-3);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-dim);
  --border-subtle: var(--border);
  --border-interactive: var(--border-strong);

  /* Spacing scale (rem) — used by new Milestone A components */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Content widths */
  --content-narrow: 720px;
  --content-default: 1120px;
  --content-wide: 1280px;

  /* Type scale */
  --text-xs: .72rem;
  --text-sm: .84rem;
  --text-base: 1rem;
  --text-lg: 1.18rem;
  --text-xl: clamp(1.45rem, 2vw, 2rem);
  --text-2xl: clamp(2rem, 4vw, 3.5rem);
  --text-hero: clamp(2.35rem, 5.6vw, 5.25rem);

  /* Radius and icon scale */
  --radius-xs: 6px;
  --radius-md: var(--radius);
  --radius-lg: 18px;
  --radius-xl: 28px;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.75rem;

  /* Elevation scale — formalizes the ad hoc shadow values already
     used across style.css (card, sidebar, dropdown) into 3 reusable
     steps, so new components stop inventing one-off shadow strings. */
  --elevation-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 6px 16px -10px rgba(0,0,0,.5);
  --elevation-2: 0 16px 32px -14px rgba(0,0,0,.6);
  --elevation-3: 0 22px 48px -18px rgba(0,0,0,.65);

  /* Motion — the existing convention across style.css is .12s-.2s ease;
     named here so new components match it instead of guessing. */
  --motion-fast: .12s ease;
  --motion-base: .18s ease;
  --motion-slow: .25s ease;

  /* Focus ring — restates the existing global :focus-visible rule as a
     token so new components can apply the identical treatment to
     custom controls (e.g. inside a modal or dropdown) consistently. */
  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;

  /* CHART SERIES COLOURS LIVE IN style.css, NOT HERE.
     This block used to alias --chart-1..5 onto var(--accent), var(--accent-2),
     var(--success), var(--warn) and var(--danger). Two problems, and the second
     one was live:

     1. It is the exact thing the categorical-colour rule forbids. A series
        painted --success says "this series is the good one", and a series
        painted --accent says "this series is ours". Neither is something the
        data said. Series identity needs its own palette.

     2. This file loads AFTER style.css, so these five aliases WON. The
        validated eight-slot palette defined in style.css was being silently
        overridden by five brand-and-status colours on every page that loads
        tokens.css — which is most of them.

     The eight slots are now declared once, in style.css, and validated by
     design-system-authority.test.js. Nothing chart-coloured belongs here. */
  --chart-grid-line: var(--border);
  --status-info: var(--accent-2);
  --status-positive: var(--success);
  --status-caution: var(--warn);
  --status-critical: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0s; --motion-base: 0s; --motion-slow: 0s; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Breakpoints are documented here for consistency, not enforced as CSS
   custom properties — custom properties cannot be interpolated into an
   @media query. Every new Milestone A component's responsive rules use
   these exact widths, matching the ad hoc set already in style.css:
   480px (small phone), 640px (phone), 860px (tablet portrait),
   900px (tablet landscape), 1100px (small desktop). */