/* ═══════════════════════════════════════════════════════════════════
   STILL · tokens (draft v1 — under design-loop validation)
   Doctrine: still at rest · rebuilt UI, never screenshots · edges
   dissolve · warm paper · one electric pair at near-zero frequency.
   Sources: peec.ai (UI display, motion), alicezhao.work (serif voice,
   mono kickers), elevenlabs.io (warm ramp, accent discipline).
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400..600&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* grounds — the warm paper ramp */
  --paper:   #FDFCFC;   /* page */
  --paper-2: #F6F4F1;   /* wells, strips */
  --paper-3: #ECE9E4;   /* deepest ground step */
  --card:    #FFFFFF;   /* raised UI surface */
  --ink:     #171717;   /* primary ink · 17.51:1 on paper */
  --ink-2:   #6F6F6F;   /* secondary ink · 4.91:1 paper, 5.02:1 card */
  --ink-3:   #9C9892;   /* FADED CONTEXT ONLY — never for reading text */

  /* the electric pair — near-zero frequency. Budget: ≤2 uses of each
     per page. Blue may carry text (7.31:1); orange NEVER carries text. */
  --blue:    #0B3BE8;
  --orange:  #FF4A00;

  /* functional (data speaks, decoration doesn't) */
  --up:      #0E7C43;   /* 5.27:1 on card */
  --down:    #C93A1B;   /* 5.12:1 on card */

  /* pastel data chips — wash + its own AA ink, never color-alone */
  --chip-lav-bg:#EFE9FB; --chip-lav-ink:#5B3BC4;  /* 6.18 */
  --chip-org-bg:#FFF0E7; --chip-org-ink:#A34708;  /* 5.45 */
  --chip-grn-bg:#E7F5EC; --chip-grn-ink:#0E7C43;  /* 4.69 */
  --chip-blu-bg:#E9EEFC; --chip-blu-ink:#1D48C7;  /* 6.46 */

  /* edges dissolve, they don't frame */
  --hair:    1px solid rgba(23,23,23,.08);
  --sh-rest: 0 4px 4px rgba(23,23,23,.04);            /* the only resting shadow */
  --sh-deep: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --sh-lift: 0 22px 34px -8px rgba(0,0,0,.17), 0 8px 12px -5px rgba(0,0,0,.12);  /* hover state of the focal card only */
  --glass:   rgba(12,12,12,.34);  /* translucent ink glass — ONLY on grain grounds, always with backdrop blur */
  --mask-b:  linear-gradient(#000 55%, transparent 92%);
  --mask-t:  linear-gradient(0deg, transparent 40%, #000 100%);

  /* concentric radii */
  --r-hero: 16px;  --r-card: 12px;  --r-ui: 10px;  --r-ctl: 6px;  --r-pill: 999px;

  /* type — Geist carries the page at interface scale */
  --sans:  'Geist', 'SF Pro Text', system-ui, sans-serif;
  --mono:  'Geist Mono', ui-monospace, monospace;
  /* TWO faces, no more. The author's voice = weight (500 ink) + mono tags,
     never a third family. (Serif accent removed by owner decision, Aug 2026.) */

  --t-display: clamp(40px, 4.5vw, 54px);  /* 500 / 1.06 / -0.02em, two-tone */
  --t-h2:      clamp(28px, 3vw, 38px);    /* 500 / 1.1  / -0.02em */
  --t-h3:      28px;                       /* 500 / 1.12 / -0.015em — card headline */
  --t-body:    16px;                       /* 400 / 1.55 */
  --t-lede:    17px;                       /* 400 / 1.6 — hero standfirst */
  --t-card:    15px;                       /* 400 / 1.5 — card body text */
  /* statement role: --t-body at weight 500 — page captions and closing lines */
  --t-stat:    22px;                       /* 500 / 1 — stat values in rebuilt UI */
  --t-ui:      13px;                       /* 500 / -0.01em — rebuilt-UI default */
  --t-ui-sm:   11.5px;                     /* 500 — rebuilt-UI secondary */
  /* quoted user content inside rebuilt UI = var(--t-ui) at weight 400 —
     quotes are content, not chrome; they drop the UI weight (.c-body, .fc) */
  --t-label:   12px; --t-micro: 10.5px;                       /* mono 400 / +0.06em caps */

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;

  /* motion — still at rest. Scroll and pointer are the only clocks. */
  --ease:  cubic-bezier(.25,.6,.2,1);
  --fast:  .18s;   /* hover state changes            */
  --mid:   .45s;   /* reveals (≤6 per page)          */
}

/* base */
*{margin:0;padding:0;box-sizing:border-box}
body{font:400 var(--t-body)/1.55 var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
::selection{background:var(--chip-blu-bg)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-ctl)}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}