/* ============================================================
   AGENTIC — VOL.001 — DESIGN TOKENS
   tokens.css

   Direction (ref: wembi.ai): premium, soft, colourful-clean.
   Warm near-white paper, warm near-black ink, a rotating system
   of candy pastels (mint / lavender / aqua). Huge characterful
   display type, clean grotesque body, monospace meta labels.
   Big radii, generous air, gooey gradient light. Smooth expo.
   ============================================================ */

:root {

  /* ---- COLOUR — paper & ink ---- */
  --paper:      #F4F2EC;   /* warm off-white base            */
  --paper-pure: #FBFAF6;   /* raised cards                   */
  --ink:        #17150F;   /* warm near-black                */
  --ink-soft:   #4A463C;   /* secondary text                 */
  --grey:       #9C978A;   /* meta / muted                   */
  --hair:       rgba(23, 21, 15, 0.12);  /* hairline rules   */

  /* ---- COLOUR — the pastel system (rotates by section) ---- */
  --mint:    #BEFF8B;
  --lav:     #D5BAFB;
  --aqua:    #84EDEA;
  --peach:   #FFC9A8;
  --accent:  var(--mint);   /* default page accent; overridden per section */

  /* ---- TYPE — families ---- */
  /* Bricolage Grotesque: characterful display (Ductile-ish).
     Hanken Grotesk: clean neo-grotesque body (Haas Unica-ish).
     Space Mono: meta labels & numerals. */
  --font-display: 'Bricolage Grotesque', 'Arial', sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica', sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* ---- TYPE — fluid scale (wembi runs enormous) ---- */
  --t-hero:   clamp(2.4rem, 1rem + 5.8vw, 6.6rem);
  --t-display:clamp(2.4rem, 1.1rem + 5vw, 6.4rem);
  --t-big:    clamp(2rem, 1.2rem + 3.4vw, 4.4rem);
  --t-h3:     clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  --t-lede:   clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  --t-body:   1.05rem;
  --t-sm:     0.92rem;
  --t-mono:   0.8rem;
  --t-tag:    0.72rem;

  --lh-tight: 0.94;
  --lh-body:  1.62;
  --ls-tight: -0.02em;
  --ls-mono:  0.02em;
  --ls-tag:   0.16em;

  /* pale washes of each pastel over paper — colour used as a surface.
     Slightly translucent so the orb coil reads through them.
     The saturated pastels stay for dots, numbers, and accents. */
  /* same paper hue at zero alpha — fading to this keeps the transition
     colourless (never muddies toward grey) */
  --paper-fade: rgba(244, 242, 236, 0);
  --mint-tint:  rgba(238, 244, 224, 0.82);
  --lav-tint:   rgba(240, 235, 238, 0.82);
  --aqua-tint:  rgba(231, 241, 236, 0.82);
  --peach-tint: rgba(245, 237, 228, 0.82);

  /* ---- LAYOUT ---- */
  --edge:   clamp(20px, 4vw, 72px);
  --nav-h:  74px;

  /* ---- RADII — everything is soft ---- */
  --r-pill: 100px;
  --r-md:   1.2rem;
  --r-sm:   0.7rem;

  /* ---- MOTION ---- */
  --expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --t-fast: 300ms;
  --t-med:  620ms;
}

@media (max-width: 768px) {
  :root { --nav-h: 62px; --t-body: 1rem; }
}