/* =============================================================
   CABOO · FRESH SYSTEM — tokens.css
   Clean-room rebuild. Color DNA carried from the brand; the
   structure is new. Display = ES Klarheit Kurrent (Xbd),
   body = Geist, mono = Geist Mono. Nothing here paints.
   ============================================================= */

@font-face {
  font-family: "Klarheit";
  src: url("../fonts/klarheit-xbd.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- ground & ink ---- */
  --bg:         #ffffff;   /* outer page — white */
  --canvas:     #faf8f4;   /* the container — warm paper resting on the white page */
  --surface:    #ffffff;
  --ink:        #1a1613;   /* warm near-black */
  --espresso:   #43301f;   /* headline + emphasis brown */
  --head-mute:  #b8aea3;   /* de-emphasized headline words */
  --body:       #857c72;   /* paragraph base */
  --ink-2:      #6f675c;
  --ink-3:      #9c958a;

  /* ---- action ---- */
  --coral-1:    #f8836b;
  --coral-2:    #f25e40;
  --coral-ink:  #d8492c;

  /* ---- lines ---- */
  --rule:       rgba(26, 22, 19, .12);
  --rule-soft:  rgba(26, 22, 19, .06);

  /* ---- type families ---- */
  --font-display: "Klarheit", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type · fluid scale (interpolates 360px → 1440px viewport) ---- */
  --fs-display: clamp(2.25rem, 1.50rem + 3.33vw, 4.5rem);    /* hero / h1 */
  --fs-h2:      clamp(1.75rem, 1.42rem + 1.48vw, 2.75rem);   /* section heads */
  --fs-h3:      clamp(1.375rem, 1.21rem + 0.74vw, 1.875rem); /* card / h3 */
  --fs-lead:    clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem); /* standfirst */
  --fs-body:    clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);    /* 16 → 17 */
  --fs-small:   clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --fs-label:   0.75rem;

  /* ---- type · rhythm ---- */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-normal: 1.5;
  --tracking-display: -.03em;

  /* ---- radius ---- */
  --r-tile:  .22em;
  --r-btn:   14px;
  --r-card:  22px;
  --r-frame: 26px;

  /* ---- shadow ---- */
  --shadow-btn:  0 1px 2px rgba(210, 73, 44, .28), 0 12px 28px -12px rgba(210, 73, 44, .55);
  --shadow-tile: 0 2px 6px rgba(26, 22, 19, .10), 0 14px 30px -16px rgba(26, 22, 19, .40);
  --shadow-pop:  0 30px 70px -34px rgba(0, 0, 0, .62);

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  .2s;
}