/* ==========================================================================
   DESIGN TOKENS — Hoist Hub
   Direction: industrial precision. The visual language of good shop equipment,
   not of a SaaS landing page. One action colour, used only for actions and
   availability, never decoratively. Hairline rules. Instrument-grade numerals.
   ========================================================================== */

:root {
  /* --- ground ---------------------------------------------------------- */
  --ink-900: #0B0E10;   /* deepest — hero, footer */
  --ink-800: #101417;
  --ink-700: #171C20;
  --ink-600: #212226;
  --ink-500: #2C3237;   /* hairlines on dark */

  --paper:      #F4F2EE; /* warm off-white — the page ground */
  --paper-raised:#FFFFFF;
  --paper-sunk: #EAE7E1;

  /* --- steel (structure, secondary text) -------------------------------- */
  --steel-700: #3D474E;
  /* --steel-500 is --fg-muted, and it carries most of the running prose on the
     site. At its original #6B767E it measured 4.16:1 on --paper and 3.77:1 on
     --paper-sunk, under the 4.5:1 floor this project holds itself to. Darkened
     to clear it on every light ground: 5.41 on paper, 4.90 on sunk, 6.05 on
     white, with the same cool-grey character. */
  --steel-500: #5A646B;
  --steel-300: #A8B1B7;
  --steel-200: #C9CFD3;
  --steel-100: #DFE3E5;

  /* --- action: Hoist Hub blue. The only saturated colour on the site. -----
     Taken from the logo. Deep enough to carry white label text at 5.67:1 and
     still pass as text on paper at 5.08:1, so the same token works for a
     button ground and for a link. --signal-ink is what sits ON it. */
  --signal:       #1A64C8;
  --signal-hot:   #2B7BE4;
  --signal-deep:  #12488F;
  --signal-wash:  #E8F0FC;
  /* Blue on an ink ground. --signal itself is only 3.41:1 there, which fails
     small text — anything blue sitting on a dark chip uses this instead. */
  --signal-lit:   #7FB2F5;
  --signal-ink:   #FFFFFF;

  /* --- state ------------------------------------------------------------ */
  --go:        #1F9D55;
  --go-wash:   #E3F5EB;
  --warn:      #B4690E;
  --warn-wash: #FCF0DC;
  --stop:      #C0342B;
  --stop-wash: #FBE9E7;
  --info:      #21607F;
  --info-wash: #E4F0F6;

  /* --- semantic --------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-raised:     var(--paper-raised);
  --bg-sunk:       var(--paper-sunk);
  --fg:            var(--ink-800);
  --fg-muted:      var(--steel-500);
  /* Not --steel-300. That is a hairline value (1.95:1 as text on paper) and
     pages were reaching for it as a third text tone — counts, meters, micro
     labels. This is a real text colour: lighter than --fg-muted so the
     hierarchy survives, but still clearing 4.5:1 on both light grounds. */
  --fg-subtle:     #5F6A72;
  --rule:          #DCD8D1;
  --rule-strong:   #C3BEB5;
  --rule-dark:     var(--ink-500);

  /* --- type ------------------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid display scale — clamp() so nothing needs a mobile override. */
  --t-hero:  clamp(3.25rem, 1.6rem + 7.4vw, 8rem);
  --t-d1:    clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  --t-d2:    clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-d3:    clamp(1.55rem, 1.25rem + 1.3vw, 2.25rem);
  --t-lead:  clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  --lh-tight: 0.92;
  --lh-snug: 1.15;
  --lh-body: 1.62;

  --tr-display: -0.028em;  /* condensed display wants negative tracking */
  --tr-label: 0.13em;      /* all-caps micro labels want the opposite */

  /* --- space (4px base) -------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* --- shape ------------------------------------------------------------- */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;  --r-lg: 14px;  --r-pill: 999px;

  /* --- elevation: tight, contact-shadow first ---------------------------- */
  --e-1: 0 1px 2px rgba(11,14,16,.06), 0 1px 1px rgba(11,14,16,.04);
  --e-2: 0 2px 4px rgba(11,14,16,.06), 0 4px 12px rgba(11,14,16,.06);
  --e-3: 0 4px 8px rgba(11,14,16,.07), 0 12px 28px rgba(11,14,16,.10);
  --e-4: 0 8px 16px rgba(11,14,16,.08), 0 28px 60px rgba(11,14,16,.16);
  --e-signal: 0 2px 0 var(--signal-deep), 0 6px 18px rgba(26,100,200,.30);

  /* --- layout ------------------------------------------------------------ */
  --wrap: 76rem;
  --wrap-narrow: 46rem;
  --wrap-wide: 88rem;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --header-h: 68px;

  /* --- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: 140ms;
  --base: 220ms;
  --slow: 420ms;

  --z-header: 60;
  --z-sticky: 50;
  --z-overlay: 90;
  --z-modal: 100;
  --z-toast: 110;
}

/* Dark surfaces opt in by class rather than by media query: this site is
   deliberately light-ground with dark anchors, not a theme-switching app. */
.on-dark {
  --bg: var(--ink-900);
  --bg-raised: var(--ink-700);
  --bg-sunk: var(--ink-800);
  --fg: #F4F2EE;
  --fg-muted: var(--steel-300);
  /* steel-500 only reaches ~3:1 on ink, so the dark ground needs its own
     subtle value rather than borrowing the light one. */
  --fg-subtle: #8A939A;
  --rule: var(--ink-500);
  --rule-strong: #3A4247;
  color: var(--fg);
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0.01ms; --base: 0.01ms; --slow: 0.01ms; }
}