/* ============================================================================
   tokens.css — the single source of truth.
   Palette, type, spacing, radius. No hard-coded hex lives outside this file.

   The theme derives from the logo (new_logo.png): a 1970s soft-geometric
   wordmark in neutral ink on warm paper. Paper and ink are sampled from the
   PNG itself so the wordmark sits seamlessly on the page. One warm retro
   accent (rust) — no cool colors anywhere.
   ========================================================================== */

:root {
  /* ---- palette ---- */
  --cream: #FCF3E5;        /* page background — exact paper color of the logo */
  --black: #121212;        /* primary text, the blob, footer — exact logo ink */
  --cream-dim: #F1E5D0;    /* subtle surface variation, hover fills on cream */
  --black-soft: #3D3A35;   /* secondary text on cream, low-emphasis borders */
  --accent: #A34A24;       /* rust — links, buttons, eyebrows, the pledge */
  --accent-tint: #E8A87C;  /* apricot — accents sitting on ink surfaces */

  /* derived, alpha-only helpers (no new hues — just cream/ink at low alpha) */
  --line-on-cream: color-mix(in srgb, var(--black) 12%, transparent);
  --line-on-dark:  color-mix(in srgb, var(--cream) 16%, transparent);
  --fill-on-dark:  color-mix(in srgb, var(--cream) 6%, transparent);
  --cream-muted:   color-mix(in srgb, var(--cream) 78%, var(--black));

  /* ---- type families ---- */
  /* Fredoka: round geometric, flat terminals — the same species as the logo */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body: "Switzer", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- type scale (1.25 ratio, 18px base via html 112.5%) ---- */
  --step--1: 0.80rem;   /* ~14px — mono metadata only */
  --step-0:  1rem;      /* 18px  — body (never smaller anywhere) */
  --step-1:  1.25rem;   /* ~23px */
  --step-2:  1.5625rem; /* ~28px */
  --step-3:  1.953rem;  /* ~35px */
  --step-4:  2.441rem;  /* ~44px */
  --step-5:  3.052rem;  /* ~55px */
  --step-6:  3.815rem;  /* ~69px */
  --step-7:  4.768rem;  /* ~86px — hero ceiling */

  /* ---- spacing ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* ---- radius ---- */
  --r-sm: 14px;
  --r-md: 28px;
  --r-lg: 48px;
  --r-xl: 120px;
  /* blob signature: gently asymmetric so the shape reads as drawn, not stamped */
  --r-blob: 88px 44px 88px 44px;
  --r-blob-alt: 44px 88px 44px 88px;

  /* ---- layout ---- */
  --measure: 68ch;
  --content: 1200px;
  --content-wide: 1360px;
  --gutter: 24px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}