/* =====================================================================
   ELENEX — DESIGN TOKENS
   Single source of truth for color, type, space, layout.
   Monochrome / brutalist-editorial direction (validated B&W, no accent).
   Consumed by components via var(--token). No hardcoded values downstream.
   ===================================================================== */
:root {
  /* ---- Color (monochrome) ---- */
  --ink:        #0a0a0a;   /* near-black, primary text / chrome */
  --ink-soft:   #1c1c1c;
  --smoke:      #6b6b6b;   /* secondary text */
  --ash:        #a3a3a3;   /* tertiary / disabled */
  --line:       #e6e6e6;   /* hairline borders */
  --paper-2:    #f4f4f4;   /* subtle surface */
  --paper:      #ffffff;   /* base surface */
  --overlay:    rgba(10,10,10,.55); /* image scrims, modals */

  /* Semantic aliases */
  --bg:         var(--paper);
  --fg:         var(--ink);

  /* ---- Typography ---- */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Helvetica Neue', Arial, system-ui, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max). Mobile-first, no jumps. */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 0.9vw,  2.1rem);
  --step-3:  clamp(2rem,    1.6rem  + 1.8vw,  3.4rem);
  /* Display steps for condensed headlines that bleed off-edge */
  --display-1: clamp(2.6rem, 1.4rem + 6vw,  6rem);
  --display-2: clamp(3.5rem, 1rem   + 12vw, 11rem);

  --leading-tight: 0.92;   /* condensed display */
  --leading-snug:  1.1;
  --leading-body:  1.55;
  --tracking-display: 0.01em;
  --tracking-label:   0.18em;  /* wide-tracked uppercase labels */

  /* ---- Space scale (fluid, 4px base) ---- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
  --space-2xs: clamp(0.5rem,  0.46rem + 0.2vw, 0.63rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.3vw, 0.94rem);
  --space-s:   clamp(1rem,    0.92rem + 0.4vw, 1.25rem);
  --space-m:   clamp(1.5rem,  1.36rem + 0.7vw, 2rem);
  --space-l:   clamp(2.25rem, 1.9rem  + 1.7vw, 3.5rem);
  --space-xl:  clamp(3.5rem,  2.8rem  + 3.5vw, 6rem);
  --space-2xl: clamp(5rem,    3.8rem  + 6vw,   9rem);

  /* ---- Layout ---- */
  --container: 1440px;
  --container-wide: 1760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.75rem);

  /* ---- Form / shape ---- */
  --radius-0: 0px;     /* brutalist default */
  --radius-1: 6px;
  --radius-2: 14px;    /* category cards (legacy continuity) */
  --border-strong: 2px solid var(--ink);
  --border-hair:   1px solid var(--line);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.2s;
  --dur-2: 0.35s;
  --dur-3: 0.7s;

  --z-header: 1000;
  --z-overlay: 5000;

  /* Fixed chrome heights — promo strip + header bar. --chrome-h offsets page top. */
  --promo-h: 32px;
  --header-h: 64px;
  --chrome-h: calc(var(--promo-h) + var(--header-h));
}

@media (max-width: 768px) {
  :root { --promo-h: 26px; --header-h: 54px; }
}