/* tokens.css — Antithesis design system, ported verbatim from the hi-fi design.
   Layer order: tokens.css → theme.css → (optional page overlays). Change values here once.
   Source of truth: design/extracted/design_handoff/README.md §Design tokens + direction1.jsx (v2d1). */

:root {
  /* ── Colour ─────────────────────────────────────────────── */
  --paper:        #FFFFFF;            /* page background */
  --paper-alt:    #F2F4FA;            /* panels */
  --ink:          #0A1F44;            /* primary text / dark bg (deep navy) */
  --ink-soft:     #1A2D54;            /* secondary text */
  --mute:         #5D6A85;            /* meta / captions (≈5.2:1 on white — passes AA) */
  --rule:         rgba(10,31,68,0.16);/* hairlines */
  --accent:       #0038B8;            /* flag blue, Pantone 286 — the ONLY accent */

  /* Accessibility variant: flag-blue at #0038B8 on navy --ink fails WCAG (both dark).
     Use --accent-on-dark for accent text/numerals placed on the navy band (e.g. the
     home stats), so they meet AA. (Fixes the design's low-contrast stats numerals.) */
  --accent-on-dark: #6f9bff;

  /* On-dark text */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255,255,255,0.72);
  --on-dark-rule:   rgba(255,255,255,0.16);

  /* ── Type ───────────────────────────────────────────────── */
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif; /* weight 400 only */
  --font-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* tabular-nums for numbers */

  /* Display tracking tightens as size grows (-0.02em → -0.045em). */
  --track-display-sm: -0.02em;
  --track-display-lg: -0.045em;

  /* ── Layout ─────────────────────────────────────────────── */
  --maxw:        1280px;   /* content max-width (1280–1440 band) */
  --maxw-wide:   1440px;
  --gutter:      64px;     /* desktop page gutter (48–64) */
  --gutter-mob:  22px;
  --stripe:      8px;      /* flag stripe top/bottom */
  --stripe-mob:  6px;

  /* ── Spacing scale ──────────────────────────────────────── */
  --space-section: 80px;   /* section vertical padding (40–80) */
  --space-section-sm: 40px;
  --space-card:    24px;   /* card padding (20–28) */
  --gap-grid:      22px;   /* grid gaps (18–24) */
  --hit:           44px;   /* min mobile hit target */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 0.7s;
  --dur-rule:   0.9s;
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-mob);
    --stripe: var(--stripe-mob);
    --space-section: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 0s; --dur-rule: 0s; }
}