/* =========================================================
   DESIGN TOKENS — Paula Odenthal Brand & Design Kit v1.0
   1:1 with the kit's "08 / Tokens" hand-off. Change values here only.
   ========================================================= */
:root {
  /* colour */
  --paper:   #FFFFFF;  /* background, everywhere — white (Paula, 2026-10-14; kit beige was #E6E0D0) */
  --ink:     #301823;  /* headings + body */
  --ink-2:   #6A4B57;  /* secondary text */
  --clay:    #9A5F47;  /* accent — sparingly, ≥18px text or non-text */
  --linen:   #F4F1EE;  /* subtle fill: placeholders, hover rows (softened for white) */
  --rule:    #E4DFDA;  /* hairlines & dividers on paper (softened for white) */

  /* type */
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-mega:    clamp(84px, 19vw, 272px);  /* lh .86  ls -0.065em  700 */
  --fs-display: clamp(48px, 7vw, 96px);    /* lh .92  ls -0.055em  700 */
  --fs-h1:      clamp(36px, 4.5vw, 64px);  /* lh 1    ls -0.045em  700 */
  --fs-h2:      clamp(28px, 3vw, 40px);    /* lh 1.05 ls -0.04em   700 */
  --fs-h3:      20px;                      /* lh 1.2  ls -0.03em   700 */
  --fs-lead:    clamp(18px, 1.6vw, 22px);  /* lh 1.45 ls -0.01em   500 */
  --fs-body:    16px;                      /* lh 1.55              400 */
  --fs-small:   14px;
  --fs-label:   13px;                      /* 700, caps, ls 0.06em */
  --fs-mono:    11px;

  /* space — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 160px;

  /* layout */
  --max: 1360px;  --cols: 12;  --gutter: 24px;
  --margin: clamp(20px, 4vw, 56px);

  /* radius */
  --r-xs: 4px; --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* motion */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --t-fast: 200ms;  --t-base: 400ms;  --t-slow: 900ms;
  --stagger: 80ms;
}
/* breakpoints (kit): mobile < 640 · tablet 640–1023 · desktop 1024–1439 · wide ≥ 1440 */
@media (max-width: 1023px) { :root { --gutter: 20px; } }
@media (max-width: 639px)  { :root { --gutter: 16px; } }