/* tokens.css — the ONE governed source for brand and component colors.
   Loaded before every other stylesheet (see page_shell() in
   generate_pages.py). No other CSS file may declare a raw brand hex
   value — component styles reference the semantic aliases below.
   See BRAND_TOKEN_REPORT.md for the source of every value. */

:root {
  /* Brand structure */
  --brand-navy-950: #101b3a;
  --brand-navy-900: #1d2d56;
  --brand-navy-800: #253765;

  /* Brand interaction */
  --brand-indigo-800: #342b83;
  --brand-indigo-700: #3f3598;
  --brand-purple-700: #5046b8;
  --brand-purple-600: #5c48da;
  --brand-purple-500: #6a57e6;

  /* Brand surfaces */
  --brand-lavender-200: #ddd7ff;
  --brand-lavender-100: #ece9ff;
  --brand-lavender-50: #f6f4ff;

  /* Neutral surfaces */
  --surface-page: #f5f6fa;
  --surface-card: #ffffff;
  --surface-muted: #f8f9fc;

  /* Text */
  --text-primary: #101b3a;
  --text-secondary: #596681;
  --text-muted: #758099;
  --text-inverse: #ffffff;

  /* Borders */
  --border-default: #d9deeb;
  --border-subtle: #e8ebf2;
  --border-brand: #bdb4ff;

  /* Semantic only — never decorative */
  --status-success: #287a5d;
  --status-warning: #a96100;
  --status-error: #b4232f;
  --status-info: #2f64a3;

  /* Focus */
  --focus-ring: #6a57e6;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Line heights */
  --line-height-heading: 1.2;
  --line-height-body: 1.55;
  --line-height-compact: 1.35;

  /* ---- Required semantic aliases (§6.2) ---- */
  --header-background: var(--brand-navy-950);
  --header-text: var(--text-inverse);
  --link-default: var(--brand-purple-600);
  --link-hover: var(--brand-indigo-800);
  --button-primary-background: var(--brand-indigo-700);
  --button-primary-hover: var(--brand-indigo-800);
  --button-secondary-border: var(--brand-indigo-700);
  --card-background: var(--surface-card);
  --card-border: var(--border-default);
  --card-hover-border: var(--border-brand);
  --section-accent-background: var(--brand-lavender-50);
  --chip-background: var(--brand-lavender-50);
  --chip-border: var(--brand-lavender-200);
  --chip-text: var(--brand-indigo-700);
  --focus-outline: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}