/* ThermoCraft v3 design tokens. Source of truth: the ThermoCraft Brand Reference
   (canva-capture-2026-10-05/thermocraft-brand-reference.pdf) and the NAWLA booth spec.
   Ported whole from v3-lab/css/tokens.css on October 6, 2026; every component reads only these variables. */

@font-face {
  font-family: "Cormorant";
  src: url("/fonts/cormorant-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour. Bronze marks eyebrows, icons, rules and focus only: never a fill. */
  --c-bone: #EDEBE7;          /* ground */
  --c-ink: #171717;           /* text */
  --c-grey: #5A5854;          /* secondary text */
  --c-bronze: #BD8E5B;        /* eyebrows, icons, rules */
  --c-bronze-deep: #9A6F42;   /* bronze type on bone: 3.7:1, large type only (Oct 8; #BD8E5B is 2.5:1 there) */
  --c-dark: #0A0A0A;          /* dark panels */
  --c-line: rgba(23, 23, 23, .16);
  --c-line-strong: rgba(23, 23, 23, .4);
  --c-on-dark: #EDEBE7;
  --c-on-dark-2: rgba(237, 235, 231, .66);
  --c-line-dark: rgba(237, 235, 231, .18);
  --scrim-bottom: linear-gradient(180deg, rgba(10, 10, 10, 0) 34%, rgba(10, 10, 10, .86) 100%);
  --scrim-left: linear-gradient(90deg, rgba(10, 10, 10, .62) 0%, rgba(10, 10, 10, .2) 48%, rgba(10, 10, 10, 0) 70%);

  /* Type. Cormorant Bold for headlines only, never below 1.9x body. Proxima Nova for the rest
     (Helvetica Neue stands in on this Mac). One serif level per section. */
  --f-serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --f-sans: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-body: 1rem;                                          /* 16 px phone */
  --t-small: .875rem;                                      /* 14 */
  --t-eyebrow: .75rem;                                     /* 12, tracked caps */
  --t-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);    /* 18 to 22 */
  --t-h3: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);     /* 18 to 21, sans 600 */
  --t-h2: clamp(2.125rem, 1.55rem + 2.3vw, 3.5rem);        /* 34 to 56, serif: 2.1x body minimum */
  --t-display: clamp(2.75rem, 1.6rem + 4.1vw, 5.25rem);    /* 44 to 84, serif */
  --t-figure: clamp(3rem, 1.9rem + 4.6vw, 6.5rem);         /* numerals, serif */
  --lh-display: 1.0;
  --lh-head: 1.06;
  --lh-body: 1.6;
  --track-eyebrow: .16em;

  /* Space: 4 px base, 8-point steps. */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4.5rem, 2.4rem + 7.2vw, 9rem);          /* 72 to 144 between sections */
  --margin: clamp(1rem, .15rem + 3.6vw, 4rem);             /* 16 px at 390, 64 at 1440 */
  --gutter: clamp(1rem, .6rem + 1.4vw, 2rem);
  --max: 1520px;
  --measure: 34rem;                                        /* body copy line length */
  --header-h: 72px;
  --radius: 2px;

  /* Motion. Three named easings, five durations. CSS and GSAP use the same names (js/tc-motion.js). */
  --ease-settle: cubic-bezier(.16, 1, .3, 1);   /* expo out: things arriving on screen */
  --ease-swift: cubic-bezier(.33, 1, .68, 1);   /* cubic out: interface responding to a hand */
  --ease-glide: cubic-bezier(.65, 0, .35, 1);   /* cubic in-out: moving between two resting states */
  --d-quick: 200ms;    /* colour, underline, icon nudge */
  --d-base: 360ms;     /* buttons, cards, header */
  --d-panel: 640ms;    /* panels opening, image swaps */
  --d-reveal: 1100ms;  /* text and image reveals */
  --d-hero: 2400ms;    /* hero arrival */
  --rise: 32px;        /* travel for a reveal */
}

@media (min-width: 768px) {
  :root { --t-body: 1.0625rem; --header-h: 80px; }        /* 17 px */
}