/* ============================================================
   F2F WEB STANDARD — tokens.css
   Single source of truth for color, type, space, motion.
   Brand changes happen HERE only. Scales: Utopia fluid method
   (320px → 1240px viewport), easings adapted from Open Props.
   ============================================================ */

@font-face{
  font-family:"Fraunces Variable";
  src:url("assets/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces Variable";
  src:url("assets/fonts/fraunces-var-italic.woff2") format("woff2-variations");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Inter Variable";
  src:url("assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk Variable";
  src:url("assets/fonts/space-grotesk-var.woff2") format("woff2-variations");
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  /* — color: warm neutrals + one accent (STANDARD C1–C3) — */
  --paper:#f6f1e5;
  --paper-2:#efe7d3;
  --paper-3:#e7dcc2;
  --ink:#16130c;
  --ink-2:#221c11;
  --ink-soft:#453b28;
  --muted:#6e6046;
  --line:rgba(22,19,12,.16);
  --line-strong:rgba(22,19,12,.34);
  --accent:#a97e1f;          /* wheat gold — the F2F metal */
  --accent-text:#86640e;     /* darker wheat: AA for small text on paper */
  --accent-bright:#c19a3d;
  --accent-pale:#f0e4bf;
  --night:#12100b;           /* warm brown-black, never blue-black */
  --night-2:#1b1710;
  --night-text:#f3ecdc;
  --night-muted:#b5a888;
  --night-line:rgba(243,236,220,.16);
  /* functional status hues — never decorative (C1) */
  --ok:#2e7d4f;
  --warn:#9a6a12;
  --info:#6f6353;

  /* — type families (T1) — */
  --font-display:"Fraunces Variable","Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Inter Variable","Inter",-apple-system,"Segoe UI",sans-serif;
  --font-grotesk:"Space Grotesk Variable","Space Grotesk",var(--font-sans);

  /* — fluid type scale (T3): 17px/1.2 @320 → 19px/1.333 @1240 — */
  --step--2:clamp(.74rem,.72rem + .11vw,.8rem);
  --step--1:clamp(.89rem,.85rem + .2vw,1rem);
  --step-0:clamp(1.06rem,1rem + .3vw,1.19rem);
  --step-1:clamp(1.28rem,1.16rem + .58vw,1.58rem);
  --step-2:clamp(1.53rem,1.34rem + .95vw,2.11rem);
  --step-3:clamp(1.84rem,1.55rem + 1.45vw,2.81rem);
  --step-4:clamp(2.21rem,1.79rem + 2.1vw,3.75rem);
  --step-5:clamp(2.65rem,2.05rem + 3vw,5rem);
  --step-6:clamp(3.2rem,1.9rem + 6.5vw,7rem); /* display extension of the same scale */

  /* — fluid space scale (L3) — */
  --space-3xs:clamp(.31rem,.3rem + .06vw,.38rem);
  --space-2xs:clamp(.56rem,.54rem + .13vw,.63rem);
  --space-xs:clamp(.81rem,.77rem + .19vw,.94rem);
  --space-s:clamp(1.06rem,1rem + .31vw,1.25rem);
  --space-m:clamp(1.59rem,1.48rem + .57vw,1.88rem);
  --space-l:clamp(2.13rem,1.93rem + .98vw,2.81rem);
  --space-xl:clamp(3.19rem,2.8rem + 1.95vw,4.69rem);
  --space-2xl:clamp(4.25rem,3.63rem + 3.1vw,7.03rem);
  --space-section:clamp(4.5rem,3.2rem + 6.5vw,8.5rem);

  /* — shape: one radius. Pills for buttons/tags, square for
       everything else — sharp-editorial (C4) — */
  --radius-full:999px;

  /* — type craft tokens: weights / tracking / leading (T4–T5) — */
  --w-display:520; --w-display-em:460; --w-head:560; --w-num:480;
  --track-display:-.015em; --track-head:-.01em; --track-label:.16em;
  --lead-display:1.04; --lead-body:1.62; --lead-snug:1.5;

  /* — motion (M2): Open Props easings, house durations — */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-3:cubic-bezier(0,0,.3,1);
  --ease-3:cubic-bezier(.25,0,.3,1);
  --dur-1:160ms;
  --dur-2:320ms;
  --dur-3:640ms;

  /* — layout — */
  --measure:62ch;
  --measure-narrow:46ch;
  --grid-max:1440px;
  --gutter:clamp(1.25rem,4vw,4rem);
}