/**
 * Design Tokens
 *
 * All CSS custom properties derived from BRANDING.md.
 * This file is enqueued first; all other CSS files reference these tokens.
 */

:root {
  /* Colors */
  --color-primary: #2f7bff;
  --color-primary-dark: #143a8c;
  --color-bg: #0a0d13;
  --color-card: #0e121a;
  --color-card-accent: #122039;
  --color-text: #eaeff6;
  --color-text-body: #aeb8c6;
  --color-text-muted: #8b95a3;
  --color-text-dim: #6e7a8c;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.12);
  --color-glow: rgba(47, 123, 255, 0.45);
  --color-white: #ffffff;

  /* Typography */
  --font-heading: "Archivo", sans-serif;
  --font-body: "Hanken Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Type scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.3125rem;
  --text-4xl: 2.375rem;
  --text-5xl: 2.75rem;
  --text-hero: 5rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.125rem;
  --space-lg: 1.75rem;
  --space-xl: 2.375rem;
  --space-2xl: 3.5rem;
  --space-3xl: 4rem;
  --space-4xl: 4.75rem;

  /* Layout */
  --container-max: 1440px;
  --container-padding: 3.5rem;

  /* Borders */
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
}