/* =============================================================
   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.
   ============================================================= */

/* Self-hosted type. Geist & Geist Mono are variable single files (latin subset);
   the full weight axis maps through one woff2 each. Klarheit ships woff2 with
   the original OTF as fallback. */
@font-face {
  font-family: "Klarheit";
  src: url("../fonts/klarheit-xbd.woff2") format("woff2"),
       url("../fonts/klarheit-xbd.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- ground & ink ---- */
  --bg:         #ffffff;   /* outer page — white */
  --canvas:     #faf8f4;   /* the container — warm paper resting on the white page */
  --ink-band:   #161310;   /* full-dark section moments (aisees band, footer kin) */
  --surface:    #ffffff;
  --ink:        #1a1613;   /* warm near-black */
  --espresso:   #43301f;   /* headline + emphasis brown */
  /* Muted inks darkened to clear WCAG AA on paper (#faf8f4). Prior light values
     kept inline for one-line revert. head-mute is display-only large text (≥3:1);
     body/ink-2/ink-3 carry real reading text (≥4.5:1). */
  --head-mute:  #9a8f83;   /* de-emphasized headline words · ~3:1 large (was #b8aea3 ~2.1:1) */
  --body:       #615a50;   /* paragraph base · ~6:1 (was #857c72 ~3.8:1) */
  --ink-2:      #5b5349;   /* ~6.6:1 (was #6f675c ~4.9:1) */
  --ink-3:      #7a7268;   /* ~4.6:1 — now safe for text (was #9c958a ~2.9:1) */

  /* ---- 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-sechead: clamp(2.125rem, 1.5rem + 2.78vw, 4rem);      /* section display — one step under the hero at every width */
  --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;

  /* ---- spacing · 8pt scale (route every gap/pad/margin through these) ----
     Inert until a component consumes it; nothing changes visually on its own. */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* ---- breakpoints · 4 shared reflow points (consolidates the 12 ad-hoc widths).
     CSS can't use vars in @media queries, so these are the documented canon —
     author media queries AT these widths so sections reflow together. ----
     --bp-sm: 600px · --bp-md: 860px · --bp-lg: 1120px · --bp-xl: 1280px */
  --bp-sm: 600px;
  --bp-md: 860px;
  --bp-lg: 1120px;
  --bp-xl: 1280px;

  /* ---- 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 — one scale for every surface ---- */
  --ease:        cubic-bezier(.2, .7, .2, 1);
  --ease-flight: cubic-bezier(.3, .7, .25, 1); /* traveling objects: pulse flight, drawer rises */
  --dur-fast:   .08s;  /* presses */
  --dur:        .2s;   /* hovers, color/fade shifts */
  --dur-reveal: .56s;  /* scroll-into-view entrances */
}