/* Design tokens extracted from https://esi-reverse-logistics.netlify.app/
   Source: live DOM (headless Chrome) cross-checked against styles.css :root. Values are identical.
   Extracted 2026-07-10. */

:root {
  /* ---- Color: core palette (verbatim from site :root) ---- */
  --ink: #11110f;              /* primary text + dark section bg */
  --paper: #f1efe8;            /* page background */
  --orange: #ff5b22;           /* primary accent: CTAs, ticker, footer, pulse */
  --acid: #d9ff43;             /* secondary accent: rare highlights, form status */
  --line: rgba(17, 17, 15, 0.18); /* hairline borders/dividers */
  --muted: #77766f;            /* secondary text on paper */
  --white: #fff;               /* text on dark surfaces */

  /* ---- Color: hardcoded in site CSS, promoted to tokens ---- */
  --ink-soft: #282825;         /* .contact section bg (dark surface variant) */
  --paper-dark: #d9d6cc;       /* .inventory-copy panel bg */
  --muted-on-dark: #aaa;       /* labels/copy on dark sections */
  --muted-on-dark-2: #888;
  --line-on-dark: #666;        /* form field underline on dark */
  --header-bg: rgba(241, 239, 232, 0.92); /* + backdrop-filter: blur(14px) */

  /* ---- Typography: families ---- */
  --mono: "DM Mono", monospace;         /* labels, nav, buttons, eyebrows */
  --sans: "Manrope", sans-serif;        /* body copy, forms */
  --display: "Space Grotesk", sans-serif; /* all headings, metrics, ticker */

  /* ---- Typography: scale (font shorthand values as declared) ---- */
  --text-h1: 600 clamp(76px, 10.4vw, 166px) / 0.75 var(--display); /* + ls -0.085em, uppercase */
  --text-h2: 500 clamp(45px, 6.8vw, 105px) / 0.94 var(--display);  /* + ls -0.065em */
  --text-h3: 500 clamp(40px, 4.4vw, 68px) / 0.94 var(--display);   /* + ls -0.055em */
  --text-metric: 500 clamp(40px, 5.5vw, 84px) / 0.8 var(--display);
  --text-footer-brand: 700 clamp(70px, 11vw, 160px) / 0.7 var(--display);
  --text-body: 400 16px / 1.55 var(--sans);
  --text-form: 400 15px / 1.4 var(--sans);
  --text-button: 600 11px / 1 var(--mono);   /* + ls 0.04em, uppercase */
  --text-nav: 500 12px / 1 var(--mono);      /* + ls 0.03em, uppercase */
  --text-label: 500 10px / 1.2 var(--mono);  /* + ls 0.11em, uppercase (eyebrow/section-label) */
  --text-ticker: 600 14px var(--display);    /* uppercase */

  --tracking-h1: -0.085em;
  --tracking-h2: -0.065em;
  --tracking-h3: -0.055em;
  --tracking-button: 0.04em;
  --tracking-nav: 0.03em;
  --tracking-label: 0.11em;

  /* ---- Spacing ---- */
  --gutter: 3.4vw;             /* standard inline gutter (≈49px @1440) */
  --space-3xs: 8px;
  --space-2xs: 12px;
  --space-xs: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 50px;
  --space-xl: 70px;
  --space-2xl: 90px;
  --space-3xl: 120px;
  --space-4xl: 140px;
  --section-pad-block: 120px;  /* dominant desktop section rhythm (90–140px band) */
  --section-pad-block-mobile: 90px;

  /* ---- Components ---- */
  --header-height: 84px;       /* 70px at <=900px */
  --button-min-height: 52px;
  --button-pad-inline: 20px;
  --button-gap: 36px;          /* label-to-arrow spread inside buttons */

  /* ---- Radius (site is deliberately square; pulse dot is the only circle) ---- */
  --radius-none: 0;
  --radius-full: 50%;

  /* ---- Shadows (none in the system; pulse ring is animation-only) ---- */
  --shadow-none: none;

  /* ---- Motion ---- */
  --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 0.2s;       /* button hover */
  --duration-base: 0.25s;      /* nav underline, tabs */
  --duration-reveal: 0.8s;     /* scroll reveal (translateY(35px) -> 0) */
  --duration-pulse: 2s;        /* pulse ring, infinite */
  --duration-ticker: 28s;      /* marquee, linear infinite, translateX(-50%) */
}

/* ---- Breakpoints (reference; from stylesheet @media rules) ----
   @media (max-width: 900px): header 70px, burger nav, grids -> 1fr
   @media (max-width: 560px): tighter padding (75-90px 5vw), smaller type
*/