/* Design tokens — sourced verbatim from Stitch export DESIGN.md (docs/figma-to-wordpress-map.md).
   Do not hand-edit values here without updating the source-of-truth doc. */
:root {
  /* Surfaces */
  --color-canvas: #0A0E14;
  --color-surface: #051424;
  --color-surface-container-lowest: #010f1f;
  --color-surface-container-low: #0d1c2d;
  --color-surface-container: #10151F;
  --color-surface-container-high: #1c2b3c;
  --color-surface-container-highest: #1E2633;
  --color-surface-bright: #2c3a4c;

  /* Text */
  --color-on-surface: #d4e4fa;
  --color-on-surface-variant: #bbc9ce;
  --color-outline: #869397;
  --color-outline-variant: #3c494d;

  /* Accent (electric cyan — use sparingly, interactive/active states only) */
  --color-primary: #3ddcff;
  --color-primary-container: #3ddcff;
  --color-on-primary-container: #003641;
  --color-on-primary: #003641;

  /* Type */
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-headline-xl: 700 48px/1.1 var(--font-heading);
  --text-headline-lg: 600 32px/1.2 var(--font-heading);
  --text-headline-md: 600 24px/1.25 var(--font-heading);
  --text-body-lg: 400 18px/1.6 var(--font-body);
  --text-body-md: 400 16px/1.6 var(--font-body);
  --text-label-caps: 500 12px/1 var(--font-mono);

  /* Shape */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Spacing rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --gutter: 24px;
  --margin-mobile: 16px;
  --margin-desktop: 48px;
  --panel-padding: 24px;
  --max-width: 1440px;

  --border-default: 1px solid var(--color-surface-container-highest);
  --border-active: 1px solid var(--color-primary);
  --glow-primary: 0 4px 20px rgba(61, 220, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  :root { --motion-scale: 1; }
}