/* ============ VARIABLES ============ */
/* Design tokens for Kinetic Haus (tokens.css, stage S01). The only file that defines site-wide custom properties. */
/* TYPEFACE SWAP (S03). The site ships Montserrat, self-hosted as five latin woff2 subsets in
   /fonts/ with the @font-face rules at the top of kh.css. Gotham web is not licensed. When it is,
   add its @font-face and prepend 'Gotham', to --font-brand; nothing else changes.
   Every font-family in kh.css reads var(--font-brand), so that one line is the whole swap.
   'Montserrat Fallback' is a metric matched local Arial or Helvetica Neue: it holds the same line
   breaks before the web font arrives, and on a machine that never gets it. */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --chrome: #C0C0C0;
  --chrome-dark: #8A8A8A;
  --gray-100: #F5F5F5;
  --gray-200: #E0E0E0;
  --gray-400: #999999;
  --gray-600: #8A8A8A;
  --gray-800: #1A1A1A;
  --gray-900: #0D0D0D;
  --section-pad: 96px;
  --side-pad: clamp(24px, 5vw, 80px);
  --max-w: 1440px;
  --accent: #C0C0C0;
  --accent-glow: rgba(192,192,192,0.15);
  --nav-h: 72px;
  --kh-btn-h: 44px;
  /* the dock sits one button height plus a gap above the bottom edge (S06) */
  --kh-dock-gap: calc(var(--kh-btn-h) + env(safe-area-inset-bottom,0px) + 20px);

  /* type: one font token, eight sizes, three tracking values (S03) */
  --font-brand: 'Montserrat', 'Montserrat Fallback', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fs-1: 0.75rem;   /* 12 px floor: marquee, labels, footer small print, nav links, chips */
  --fs-2: 0.875rem;
  --fs-3: 1rem;
  --fs-4: 1.125rem;
  --fs-5: clamp(1.55rem, 2.4vw, 2.3rem);   /* h2.display-md, section headings */
  --fs-6: clamp(2.2rem, 5vw, 4.5rem);      /* display-lg, event and journal titles */
  --fs-7: clamp(3rem, 8vw, 7rem);          /* hero display-xl */
  --fs-8: clamp(3.2rem, 9vw, 7.5rem);      /* .ph-title */
  --track-tight: -0.03em;   /* display sizes and body copy */
  --track-ui: 0.14em;       /* buttons, nav, chips */
  --track-kicker: 0.22em;   /* kickers, section labels */

  /* muted text (S08). Every tier clears 4.5:1 at the 12 px floor on #000, and the
     tiers stay far enough apart that the hierarchy still reads:
       body copy       #fff, rgba(255,255,255,0.82)     21:1, 13.8:1
       secondary copy  rgba(255,255,255,0.70 to 0.78)   10.0:1 to 12.4:1
       --muted         labels, kickers, notes, marquee  8.3:1
       --gray-600      hints, footer social, the client-logo label  6.1:1
     --muted-on-light is the same muted tier on the white and #f4f3f0 sections,
     about 6:1 there. */
  --muted: rgba(255,255,255,0.64);
  --muted-on-light: rgba(0,0,0,0.62);
}
@media (max-width:768px){:root{--section-pad:64px;--kh-btn-h:40px}}
/* large desktop side padding (was in the LARGE DESKTOP section) */
@media (min-width:1200px){:root{--side-pad:clamp(40px, 6vw, 100px)}}