/* TWP Landingpages — Design Tokens
   Source of truth: docs/design-system.md §2–§4. Do not invent new colors. */

:root {
  /* §2 Colors */
  --navy: #1E3A8A;
  --navy-deep: #16306E;
  --sky: #5BA8FF;
  --paper: #FAFBFD;
  --ink: #0F172A;
  --slate: #64748B;
  --line: #E2E8F0;
  --success: #16A34A;
  --line-on-navy: rgba(255, 255, 255, 0.14);
  /* a11y: sky for SMALL TEXT — same family, darkened to reach WCAG AA
     (#5BA8FF is 2.6:1 on paper; graphics/large marks keep the original sky) */
  --sky-text: #2B6CB8;

  /* Semantic layer — .section--navy overrides these, components only use these */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--slate);
  --rule: var(--line);

  /* §3 Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --size-h1: clamp(2.6rem, 7vw, 5.5rem);
  --size-h2: clamp(1.8rem, 4vw, 3rem);
  --size-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --size-body: 1.0625rem;
  --size-mono: 0.75rem;

  /* §4 Layout */
  --container-max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-card: 16px;
  --radius-pill: 999px;
  --section-pad: clamp(88px, 13vw, 152px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo.out-alike for CSS hovers */
}