/* FERRO design tokens. Contrast (WCAG): molten/scoria 6.26, ember/scoria 14.67, glow/scoria 8.33,
   scoria/paper 16.82, white/scoria 19.43, ash/molten 4.26. White on molten is 3.10: large type only. */
@font-face { font-family: "Big Shoulders"; src: url("../fonts/BigShoulders.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Sedgwick"; src: url("../fonts/SedgwickAveDisplay.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* colour: one flood (molten) + one base (scoria), like a single-colour brand system */
  --molten: #ff5b1a;      /* the brand: floods, display type, primary buttons */
  --glow: #ff8a4f;        /* hover of molten fills */
  --heat: #ff6a2b;        /* ribbon variant */
  --ember: #ffd8c2;       /* small text on dark */
  --paper: #f6ede6;       /* tables, light cards */
  --scoria: #140b07;      /* base */
  --slag: #241812;        /* raised surface */
  --ash: #3e2c22;         /* lines on dark, muted */
  --white: #ffffff;

  /* type */
  --f-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Sedgwick", "Comic Sans MS", cursive;

  --t-mega: clamp(110px, 2.8px + 27.5vw, 470px);  /* bold typography words */
  --t-ribbon: clamp(120px, 14vw + 40px, 300px);   /* hero ribbon */
  --t-title-1: clamp(72px, 8.6vw + 20px, 190px);  /* section titles: CLASSES, FERRO */
  --t-title-2: clamp(48px, 4.8vw + 18px, 110px);
  --t-title-5: clamp(26px, 1.4vw + 16px, 40px);
  --t-title-6: clamp(18px, .6vw + 13px, 24px);
  --t-hand-1: clamp(46px, 5vw + 18px, 120px);
  --t-hand-2: clamp(40px, 8vw + 20px, 170px);
  --t-hand-3: clamp(26px, 2vw + 16px, 52px);
  --t-callout: clamp(13px, .2vw + 12px, 16px);
  --t-small: clamp(10px, .15vw + 9.4px, 12px);
  --t-body: clamp(15px, .3vw + 13px, 18px);

  /* layout: 16-column grid like the reference */
  --cols: 16;
  --pad: clamp(16px, 1.2vw + 10px, 32px);
  --gutter: clamp(8px, .6vw + 4px, 16px);
  --col: calc((100vw - 2 * var(--pad)) / var(--cols));
  --bar-h: clamp(48px, .5vw + 46px, 56px);

  /* motion */
  --e-expo: cubic-bezier(.19, 1, .22, 1);       /* expo.out: hovers, menu */
  --e-circ: cubic-bezier(.075, .82, .165, 1);   /* buttons */
  --e-io: cubic-bezier(.87, 0, .13, 1);         /* expo.inOut: ribbon split, curtain */
  --d-fast: .25s; --d-mid: .5s; --d-slow: .75s; --d-split: 1s;
}