/**
 * Design tokens — single source of truth for colors, spacing, radii, and type.
 * Change the look of the site by editing values here only.
 */

:root {
  /* ─── Palette (cream paper + teal ink theme) ─────────────────────
   * Accent rationale: deep teal (hsl 182°) sits at the bridge between
   * warm and cool on the wheel. At 40% lightness it reads as ink on
   * paper — a timeless pairing — rather than a "digital UI" sky-blue.
   * Contrast: white-on-accent ≈ 7:1 (AAA); accent-on-paper ≈ 5:1 (AA).
   * ──────────────────────────────────────────────────────────────── */
  --bg: hsl(40, 18%, 94%);           /* neutral warm cream — less orange, more paper */
  --surface: hsl(40, 16%, 97%);      /* lighter cream for raised elements */
  --border: hsl(36, 14%, 88%);       /* soft warm-neutral border */
  --text: hsl(210, 11%, 13%);        /* near-black charcoal */
  --text-soft: hsl(28, 10%, 22%);    /* warm brown-charcoal for body copy */
  --muted: hsl(28, 7%, 38%);         /* warm gray for secondary text */
  --accent: hsl(200, 77%, 52%);      /* deep teal-cyan — ink quality */
  --accent-dim: hsl(200, 79%, 55%);  /* darker teal for hover / pressed */
  --accent-tint: hsl(200, 55%, 93%); /* very light teal wash for hover states */
  --white: hsl(0, 0%, 100%);

  /* ─── Border radius (Ubuntu-style: approachable, not sharp) ───────── */
  --radius-sm: 6px;   /* buttons, small UI elements */
  --radius-md: 10px;  /* cards, stat panels */
  --radius-lg: 16px;  /* large panels, mobile menu */
  --radius-full: 9999px; /* pills, divider accents */

  /* ─── Modular type scale — ratio 1.333 (perfect fourth), base 16px ─ */
  --step--1: 0.75rem;   /* 12px */
  --step-0: 1rem;       /* 16px */
  --step-1: 1.333rem;   /* ~21px */
  --step-2: 1.777rem;   /* ~28px */
  --step-3: 2.369rem;   /* ~38px */
  --step-4: 3.157rem;   /* ~51px */
  --step-5: 4.209rem;   /* ~67px */

  /* ─── Spacing — 4px base grid ───────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* ─── Layout ────────────────────────────────────────────────────── */
  --nav-h: 64px;
  --max-w: 1024px;

  /* ─── Transitions ───────────────────────────────────────────────── */
  --ease: 0.2s ease;
  --ease-slow: 0.3s ease;
}