/* ============================================================
   DESIGN TOKENS - the personalization layer.
   Every color, type, space, radius, and shadow value lives here.
   Nothing elsewhere should hardcode a color.

   DIRECTION: jobsite / industrial.
   Asphalt + concrete neutrals, one hi-vis accent, hard edges,
   heavy condensed display type. Warmth comes from photography,
   not the palette. Change the values here to rebrand.
   ============================================================ */

:root {
  /* ---- Color (committed: bitumen asphalt + concrete + one hi-vis) ----
     Neutrals carry real warmth (hue ~50-60, low chroma) so surfaces read
     as bitumen/concrete material, not generic warm-dark. Orange is the
     only saturated note. */
  --color-bg:            oklch(16% 0.012 55);   /* asphalt - page base       */
  --color-surface:       oklch(22% 0.016 52);   /* concrete-dark - panels     */
  --color-surface-cream: oklch(11% 0.012 50);   /* darkest band               */
  --color-surface-2:     oklch(28% 0.018 52);   /* lighter concrete           */
  --color-ink:           #f4f1e9;   /* bone - headings & body text           */
  --color-ink-soft:      #b0a99c;   /* concrete grey - secondary text        */
  --color-line:          rgb(244 241 233 / 0.12);  /* hairline rules         */
  --color-line-strong:   rgb(244 241 233 / 0.30);

  --color-accent:        #ff5a1e;   /* hi-vis safety orange - the one signal */
  --color-accent-ink:    #161412;   /* near-black text on the orange          */
  --color-accent-2:      #ff7a45;   /* lighter orange - FOCUS STATE (distinct from brand) */
  --color-accent-2-ink:  #ff7a45;   /* lighter orange for accent TEXT on dark */

  /* Translucent bone derived from --color-ink - every neutral traces back
     to the two warm anchors (bone + asphalt), so cohesion never fractures. */
  --text-on-dark-soft:   rgb(244 241 233 / 0.72);

  /* Semantic aliases (reference these in components) */
  --bg:            var(--color-bg);
  --surface:       var(--color-surface);
  --text:          var(--color-ink);
  --text-muted:    var(--color-ink-soft);
  --brand:         var(--color-accent);
  --brand-text:    var(--color-accent-ink);

  /* ---- Typography -------------------------------------------
     Anton (display, single weight 400) carries every poster moment;
     Archivo (body, 400/500/600/800) does the reading. No serif lane -
     emphasis lives in the brand register (Anton or accent spec-labels),
     never in italic-serif. font-synthesis:none in base.css guards faux weights. */
  --font-display: "Anton", "Archivo", Impact, sans-serif;  /* heavy condensed signage */
  --font-body:    "Archivo", system-ui, -apple-system, sans-serif;

  /* Fluid type scale - committed ~1.333 ratio so mid hierarchy reads,
     not an Archivo blur below the fold. */
  --fs-hero:   clamp(3rem, 7.5vw, 6rem);   /* display ceiling - big, not shouting */
  --fs-h2:     clamp(2.2rem, 5vw, 4rem);
  --fs-h3:     clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-lead:   clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.8125rem;
  --fs-eyebrow:0.7rem;

  --lh-tight:  0.95;   /* condensed display sits tight */
  --lh-snug:   1.05;
  --lh-body:   1.6;

  --ls-tight:  -0.01em;  /* true negative for all-caps Anton signage */
  --ls-wide:   0.18em;   /* labels / spec tags */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing scale ---------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* ---- Radii (hard / industrial) ---------------------------- */
  --radius-pill: 2px;
  --radius-lg:   4px;
  --radius-md:   3px;
  --radius-sm:   2px;

  /* ---- Shadows (restrained on dark) ------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 10px 30px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 26px 70px rgb(0 0 0 / 0.55);

  /* ---- Layout widths ---------------------------------------- */
  --maxw:       1240px;
  --maxw-wide:  1440px;
  --maxw-text:  62ch;
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* ---- Motion ------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur:      0.32s;
  --dur-slow: 0.6s;

  /* ---- Z-index ----------------------------------------------- */
  --z-nav:  100;
  --z-gate: 10000;
}