/* ==========================================================================
   May Modern Construction — Design Tokens
   Swiss-industrial editorial system: paper/ink base, single safety-orange
   accent, Inter-driven bold display type. Light mode by default.
   ========================================================================== */
:root{
  /* Core palette */
  --paper:     #FAFAF7;
  --paper-dim: #F1F0EB;
  --ink:       #121212;
  --ink-soft:  #3A3A38;
  --slate:     #5B5F5A;
  --slate-lt:  #8A8D87;
  --orange:    #EA580C;
  --orange-dk: #C2410C;
  --orange-lt: #FDECE1;
  --white:     #FFFFFF;
  --border:    #DEDDD5;
  --border-dk: #BEBCB1;
  --danger:    #C0362C;
  --success:   #3F6B4C;

  /* Dark inverse (used for occasional full-bleed contrast bands, not the whole site) */
  --dark:      #121212;
  --dark-2:    #1B1B19;
  --on-dark:   #FAFAF7;

  /* Typography — Big Shoulders is an industrial/condensed display face
     (its name and form nod to steel-construction-era lettering), paired with
     Archivo for body text. Deliberately avoiding Inter/Geist/Space Grotesk —
     the current wave of "safe" AI-template faces. */
  --font-display: 'Big Shoulders Display', 'Archivo', sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Newsreader', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --nav-h: 72px;
  --container: min(1760px, 92vw);
  --container-narrow: 860px;
  --gutter: clamp(20px, 5vw, 64px);
  /* Left inset for edge-to-edge grids (hero, etc.) so their copy column
     lines up with .container content instead of touching the viewport edge. */
  --content-inset: calc(max((100vw - var(--container)) / 2, 0px) + var(--gutter));

  /* Motion — quicker/snappier than a soft-luxury glide, to read as precise rather than plush */
  --ease: cubic-bezier(0.2,0.8,0.2,1);
  --ease-soft: cubic-bezier(0.4,0,0.2,1);
  --dur-fast: 0.18s;
  --dur: 0.4s;
  --dur-slow: 0.7s;

  /* Elevation — flat by default; borders do the work, not shadows */
  --shadow-sm: 0 1px 2px rgba(18,18,18,0.06);
  --shadow-md: 0 12px 28px rgba(18,18,18,0.12);

  color-scheme: light;
}

/* Fluid type scale — big jumps for a confident Swiss-poster hierarchy */
:root{
  --fs-display: clamp(48px, 8vw, 128px);
  --fs-h1:      clamp(36px, 5.2vw, 72px);
  --fs-h2:      clamp(28px, 3.6vw, 48px);
  --fs-h3:      clamp(19px, 2vw, 26px);
  --fs-lead:    clamp(17px, 1.4vw, 20px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-micro:   11px;
}