/* ==========================================================================
   tokens.css — Ryevolution teaser.
   Role names are the _starter floor; the values are this project's.
   ========================================================================== */

:root {
  /* --- Type scale (fluid 360 → 1440) ----------------------------------- */
  --t--1:      clamp(0.875rem,  0.854rem + 0.09vw,  0.9375rem); /* 14 → 15 */
  --t-0:       clamp(1.0625rem, 1rem     + 0.28vw,  1.25rem);   /* 17 → 20 */
  --t-1:       clamp(1.1875rem, 1.042rem + 0.65vw,  1.625rem);  /* 19 → 26 */
  --t-2:       clamp(1.375rem,  1.125rem + 1.11vw,  2.125rem);  /* 22 → 34 */
  --t-3:       clamp(1.5625rem, 1.167rem + 1.76vw,  2.75rem);   /* 25 → 44 */
  --t-4:       clamp(1.8125rem, 1.208rem + 2.69vw,  3.625rem);  /* 29 → 58 */
  --t-5:       clamp(2.125rem,  1.25rem  + 3.89vw,  4.75rem);   /* 34 → 76 */
  --t-display: clamp(2.75rem,   0.333rem + 10.74vw, 10rem);     /* 44 → 160 */

  /* --- Families — set in fonts.css -------------------------------------- */
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Leading & tracking ----------------------------------------------- */
  --lh-display: 1.02;
  --lh-tight:   1.15;
  --lh-body:    1.55;
  --tr-display: -0.03em;
  --tr-label:    0.12em;

  /* --- Measure ----------------------------------------------------------- */
  --measure:       66ch;
  --measure-tight: 46ch;

  /* --- Space ------------------------------------------------------------- */
  --s-1:  0.25rem;  --s-2:  0.5rem;  --s-3:  0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6:  2rem;    --s-7:  3rem;     --s-8: 4rem;
  --s-9:  6rem;     --s-10: 8rem;    --s-11: 10rem;    --s-12: 12.5rem;

  --section-y: clamp(4.5rem, 2.667rem + 8.15vw, 10rem);
  --gutter:    clamp(1.5rem, 0.667rem + 3.70vw, 4rem);

  /* --- Colour roles ------------------------------------------------------
     Ground is the crumb of a dark rye loaf; ink and second ink are lifted
     straight off the lockup (#f1f0d9 cream, #f3e2d0 warm off-white).
     Paint is the oven ember and is the ONLY thing on the page that is warm.
       cream  on ground = 15.5:1
       ember  on ground =  5.7:1   (small text, needs ≥ 4.5)         */
  /* Not decoration: this is what makes form controls, scrollbars and the
     browser's own UI pick their dark variants instead of guessing. */
  color-scheme: dark;

  --ground:   #221317;
  --ground-2: #2B1A1D;
  --ink:      #F1F0D9;
  --ink-2:    #B8AE97;
  --paint:    #D37C38;
  --hairline: rgba(241, 240, 217, 0.14);

  /* --- Components --------------------------------------------------------- */
  --radius: 0;
  --touch: 44px;

  /* --- Motion ------------------------------------------------------------
     Contract lives in CLAUDE.md. Heavy and unhurried — an oven, not an app.
     No bounce anywhere: this brand is 1946, not playful.                 */
  --ease-out:     cubic-bezier(0.25, 1, 0.5, 1);   /* quart — UI          */
  --ease-out-exp: cubic-bezier(0.16, 1, 0.3, 1);   /* expo  — scene       */
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);

  --dur-fast:  180ms;
  --dur:       280ms;
  --dur-slow:  420ms;
  --dur-scene: 1100ms;
}