/* ==========================================================================
   SETTINGS — design tokens (colour, type, spacing, motion)
   Data-Editorial style: precise, chart-like, tabular. One spacing scale,
   one type pair, a restrained editorial energy.
   ========================================================================== */

:root {
  /* Colour — crisp white base, electric blue primary, hot magenta accent */
  --c-bg: #ffffff;
  --c-surface: #f5f6fb;
  --c-surface-2: #eef0f9;
  --c-ink: #10131c;
  --c-ink-soft: #4b5064;
  --c-ink-faint: #7b8093;
  --c-line: #dde0ea;
  --c-line-strong: #c3c8d8;
  --c-blue: #1a3aed;
  --c-blue-ink: #10236e;
  --c-blue-tint: #ecefff;
  --c-magenta: #e8148c;
  --c-magenta-tint: #fdeaf4;
  --c-good: #0f7a4b;
  --c-good-tint: #e7f6ee;

  /* Type */
  --f-display: "Roboto Slab", "Georgia", serif;
  --f-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing scale — 4/8 based */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Layout */
  --container-w: 74rem;
  --container-narrow: 46rem;
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Motion — restrained: hover states only, no scroll animation */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease: cubic-bezier(0.3, 0, 0.2, 1);
}

@media (max-width: 720px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.5rem;
    --fs-2xl: 1.75rem;
    --sp-11: 4rem;
    --sp-10: 3.5rem;
  }
}

@media (max-width: 400px) {
  :root {
    --fs-4xl: 2.125rem;
  }
}