/* Design tokens — source of truth for brand. Mirrors .claude/skills/brand-guidelines/SKILL.md */

:root {
  /* Color — primary (navy) */
  --c-primary: #1D2A5C;
  --c-primary-dark: #141F47;
  --c-primary-light: #E8ECF5;

  /* Color — secondary (orange) */
  --c-secondary: #F26A1F;
  --c-secondary-dark: #D8570F;
  --c-secondary-light: #FFE8D6;
  --c-focus-ring: #FFB27A;

  /* Neutrals */
  --c-ink: #1A1A1A;
  --c-ink-muted: #5B6478;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F4F5F8;
  --c-border: #E2E5EC;

  /* Status */
  --c-error: #C62828;
  --c-success: #2E7D4F;

  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-micro: 0.8125rem;   /* 13px */
  --fs-sm:    0.875rem;    /* 14px */
  --fs-base:  1rem;        /* 16px */
  --fs-lg:    1.25rem;     /* 20px */
  --fs-h4:    1.25rem;     /* 20px */
  --fs-h3:    1.5625rem;   /* 25px */
  --fs-h2:    1.9375rem;   /* 31px */
  --fs-h1:    2.4375rem;   /* 39px */
  --lh-tight: 1.2;
  --lh-body:  1.55;

  /* Spacing (8px grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Radius */
  --r-btn: 8px;
  --r-card: 12px;
  --r-input: 8px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Layout */
  --max-w: 1200px;
  --max-read: 680px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 31, 71, 0.06), 0 1px 1px rgba(20, 31, 71, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 31, 71, 0.08), 0 2px 4px rgba(20, 31, 71, 0.04);
  --shadow-lg: 0 20px 40px rgba(20, 31, 71, 0.12), 0 4px 8px rgba(20, 31, 71, 0.06);

  /* Motion */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

@media (max-width: 720px) {
  :root {
    --fs-h1: 2rem;      /* 32px */
    --fs-h2: 1.625rem;  /* 26px */
    --fs-h3: 1.375rem;  /* 22px */
  }
}