/* Self-hosted variable fonts (latin subset, SIL OFL 1.1, licenses in /fonts).
   Preloaded from each page's <head>. */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin-opsz-wght.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Cool Reporting — design tokens (source: CLAUDE.md §3). Port 1:1 to the Astro tokens.css. */
:root {
  /* Colour */
  --paper: #F5F2EA;
  --paper-2: #EFEBE0;
  --line: #DDD7C8;
  --ink: #16181D;
  --ink-muted: #4A4F58;
  --ink-soft: #5B606A;
  --navy: #16213A;
  --navy-line: #3A4766;
  --on-navy: #F5F2EA;
  --on-navy-2: #C9CEDA;
  --accent: #C2410C;
  --accent-hover: #9A3412;
  --accent-soft: #F4A57C;
  --alert-bg: #FBEDE4;
  --data-blue: #1F4E79;
  --white: #FFFFFF;
  --danger: #B42318;
  --ok: #1E6B3A;

  /* Type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(40px, 5.2vw, 68px);
  --fs-h2: clamp(32px, 3.6vw, 48px);
  --fs-h3: 22px;
  --fs-lead: clamp(18px, 1.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 14px;

  /* Space (8px rhythm) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 80px;
  --s-11: 104px;
  --gutter: 80px;
  --maxw: 1280px;

  /* Shape */
  --r-pill: 999px;
  --r-card: 20px;
  --r-inner: 12px;
  --shadow-card: 0 24px 60px -30px rgba(22, 24, 29, 0.35);

  /* Motion */
  --t-fast: 150ms;
  --t-med: 240ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Chrome */
  --header-h: 80px;
}

@media (max-width: 1024px) { :root { --gutter: 40px; --header-h: 72px; } }
@media (max-width: 768px)  { :root { --gutter: 24px; --fs-body: 16px; } }
@media (max-width: 420px)  { :root { --gutter: 20px; } }