:root {
  /* color tokens (base) */
  --color-bg: #0a0a0a;
  --color-foreground: #ffffff;
  --color-accent: #0066cc;
  --color-muted: #6b6b6b;

  /* spacing (base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;

  /* typography (base) */
  --font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* focus (base) */
  --focus-ring: 3px solid var(--color-accent);

  /* ------------------------------- */
  /* semantic tokens (NEW, governed) */
  /* ------------------------------- */

  /* core semantic colors */
  --bg: var(--color-bg);
  --text: var(--color-foreground);
  --text-muted: var(--color-muted);
  --border: rgba(255, 255, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --focus: var(--color-accent);

  /* layout */
  --content-max: 960px;
  --measure: 70ch;
  --form-max: 720px;
  --logo-h: 44px;

  /* radius */
  --radius-2: 10px;

  /* extended spacing (derived) */
  --space-5: calc(var(--space-4) + var(--space-1)); /* 56 */
  --space-6: calc(var(--space-4) + var(--space-2)); /* 64 */
  --space-8: calc(var(--space-4) * 2); /* 96 */
  --space-10: calc(var(--space-4) * 2 + var(--space-2)); /* 112 */
  /* small spacer (12px) used for tight vertical rhythm */
  --space-xs: 12px;

  /* typography semantics */
  --font-body: 400 var(--font-size-base) / var(--line-height-base)
    var(--font-family);
  --font-display: 650 32px / 1.15 var(--font-family);
  --font-h2: 600 20px / 1.2 var(--font-family);
  --leading: var(--line-height-base);
  --tracking-tight: -0.01em;

  /* hero image */
  --avatar-size: 220px;
  --radius-round: 9999px;
  /* hero box heights (desktop / mobile) */
  --hero-height-md: 240px;
  --hero-height-sm: 320px;
  /* elevation / shadows */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 6px 18px rgba(0, 0, 0, 0.12);
  /* semantic alias for nav */
  --nav-elevation: var(--elevation-1);
  /* navigation */
  --nav-height: 56px;
  /* footer */
  --footer-height: 56px;
}

/* Reduced motion token hook (future-safe) */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* no motion tokens yet — placeholder for future */
  }
}