/* ============================================================================
   tokens.css — THE TOKEN CONTRACT (the "design API") · Buddy (V9)
   ----------------------------------------------------------------------------
   Defines the NAMES every component is allowed to use, plus structural defaults
   (spacing, radius, sticker shadows, motion, type scale) that don't change per
   theme. COLOR VALUES live in themes/theme-buddy.css, scoped to [data-design].
   Components must reference these tokens only — never raw hex (enforced by
   tools/check-architecture.mjs). See updated-ui-design (Buddy V9 spec).
   ============================================================================ */

/* Self-hosted brand fonts (privacy, no runtime third-party connection). Both are
   VARIABLE fonts — one latin-subset woff2 covers the whole weight axis. Vendored
   by tools/vendor-fonts.mjs. font-display:swap keeps text visible while loading. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fredoka.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter.woff2") format("woff2");
}

:root {
  /* --- Spacing scale ------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Radius (chunky / squircle) ----------------------------------------- */
  --r: 22px; /* default card / control */
  --r-lg: 30px; /* large cards, modal */
  --r-md: 18px; /* icon chips */
  --r-sm: 14px; /* tiles, inputs, wavebox */
  --r-pill: 999px; /* chips, pills, buttons */

  /* --- Sticker shadows — ALWAYS hard (zero blur), offset by --line --------- */
  --sticker: 4px 4px 0 var(--line);
  --sticker-sm: 3px 3px 0 var(--line);
  --sticker-lg: 6px 6px 0 var(--line);
  --sticker-press: 1px 1px 0 var(--line);

  /* --- Type families ------------------------------------------------------- */
  --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas,
    monospace;

  /* --- Fluid type scale ---------------------------------------------------- */
  --fs-hero: clamp(2rem, 5vw, 3rem);
  --fs-h1: clamp(1.6rem, 3.5vw, 2.25rem);
  --fs-h2: clamp(1.2rem, 2.2vw, 1.5rem);
  --fs-body: 16px;
  --fs-sm: 0.8125rem;
  --fs-num: clamp(3.2rem, 9vw, 4.8rem); /* the big dB number */
  --lh-body: 1.6;
  --lh-display: 1.12;

  /* --- Motion — springy is the signature feel ----------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Density / layout ---------------------------------------------------- */
  --control-h: 46px;
  --gap: 18px;
  --maxw: 1080px;
  --maxw-prose: 68ch;

  /* --- Z layers ------------------------------------------------------------ */
  --z-header: 100;
  --z-toast: 200;
  --z-modal: 300;
}