/* ═══════════════════════════════════════════════════════════════
   LEVIS VISION — DESIGN TOKENS
   Single source of truth. Never hardcode a value that lives here.

   Brand colours are fixed by the identity:
     #101214  primary dark
     #B8BFC6  metallic light
     #0A0B0C  deep black
   The neutral ramp below is derived from those three only.
   No hue is introduced anywhere in this file.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── NEUTRAL RAMP ─────────────────────────────────────────────
     Cool-cast greys interpolated between #0A0B0C and #FFFFFF,
     passing exactly through the two brand anchors.            */
  --ink-1000: #050607;
  --ink-950:  #0A0B0C;   /* BRAND — deep black. Page ground.    */
  --ink-900:  #101214;   /* BRAND — primary dark. Surfaces.     */
  --ink-850:  #15181A;
  --ink-800:  #1B1F22;
  --ink-750:  #22262A;
  --ink-700:  #2A2F34;
  --ink-600:  #3A4046;
  --ink-500:  #4E555C;
  --ink-400:  #697077;
  --ink-300:  #8A9198;
  --ink-250:  #A2A9B0;
  --ink-200:  #B8BFC6;   /* BRAND — metallic light.             */
  --ink-150:  #CCD2D7;
  --ink-100:  #DEE3E7;
  --ink-050:  #EFF2F4;
  --white:    #FFFFFF;

  /* ── SEMANTIC SURFACES ──────────────────────────────────────── */
  --bg:            var(--ink-950);
  --bg-raised:     var(--ink-900);
  --bg-card:       var(--ink-850);
  --bg-card-hover: var(--ink-800);
  --bg-inverse:    var(--ink-050);

  /* ── SEMANTIC TEXT ───────────────────────────────────────────
     fg-primary   14.9:1 on --bg   AAA
     fg-secondary  8.9:1 on --bg   AAA
     fg-muted      4.9:1 on --bg   AA  (never below this for text)
     fg-faint      is DECORATIVE ONLY — never carries information. */
  --fg-primary:   var(--ink-050);
  --fg-secondary: var(--ink-200);
  --fg-muted:     var(--ink-300);
  --fg-faint:     var(--ink-500);
  --fg-inverse:   var(--ink-950);

  /* ── ACCESSIBILITY BLUE ──────────────────────────────────────
     The one hue in the entire system, and a deliberate exception:
     the international accessibility symbol is recognised as white
     on blue, so the affordance is worth more than the consistency.
     Used ONLY for that icon — never as a brand or accent colour.
     Contrast on --bg-card is 5.9:1.                              */
  --a11y-blue: #2E90FF;

  /* ── LINES ──────────────────────────────────────────────────── */
  --line-subtle: rgba(184, 191, 198, 0.09);
  --line:        rgba(184, 191, 198, 0.16);
  --line-strong: rgba(184, 191, 198, 0.30);
  --line-solid:  var(--ink-700);

  /* ── FOCUS ──────────────────────────────────────────────────── */
  --focus-ring:   var(--white);
  --focus-offset: 3px;
  --focus-width:  2px;

  /* ── TYPEFACES ───────────────────────────────────────────────
     Archivo mirrors the logo: Light for LEVIS, Black for VISION.
     Heebo is the Hebrew companion — same 100–900 range.
     Space Grotesk carries technical labels, numerals, eyebrows. */
  --font-display: 'Archivo', 'Heebo', system-ui, sans-serif;
  --font-body:    'Heebo', 'Archivo', system-ui, sans-serif;
  /* Space Grotesk carries no Hebrew, so Heebo sits behind it: Latin
     labels get the technical grotesque, Hebrew labels get the brand
     face instead of whatever the operating system would substitute. */
  --font-mono:    'Space Grotesk', 'Heebo', ui-monospace, monospace;

  /* Hebrew sets Heebo first; :lang() rules in base.css swap these. */

  /* ── TYPE SCALE ──────────────────────────────────────────────
     Fluid, clamped. Base 16px never shrinks below 16px.        */
  --t-display: clamp(3.5rem, 11vw, 11rem);
  --t-h1:      clamp(2.6rem, 7vw, 6rem);
  --t-h2:      clamp(2rem, 4.6vw, 3.75rem);
  --t-h3:      clamp(1.4rem, 2.4vw, 2.1rem);
  --t-h4:      clamp(1.15rem, 1.6vw, 1.4rem);
  --t-body-lg: clamp(1.0625rem, 1.15vw, 1.25rem);
  --t-body:    1rem;
  --t-sm:      0.9375rem;
  --t-label:   0.75rem;
  --t-micro:   0.6875rem;

  /* ── TRACKING ───────────────────────────────────────────────
     The logo's LEVIS is very wide-tracked; that is the brand's
     signature and is reproduced by --track-brand.              */
  --track-brand:   0.42em;
  --track-eyebrow: 0.26em;
  --track-label:   0.14em;
  --track-tight:   -0.02em;
  --track-display: -0.035em;

  /* ── WEIGHTS ─────────────────────────────────────────────────
     Only 300 and 800/900 carry the brand voice. Mid weights are
     for reading text and should not appear in display type.    */
  --w-light: 300;
  --w-book:  400;
  --w-med:   500;
  --w-bold:  700;
  --w-black: 900;

  /* ── LEADING ────────────────────────────────────────────────
     Hebrew needs slightly more leading than Latin at the same
     size; --leading-body is tuned for Heebo.                   */
  --leading-display: 0.92;
  --leading-tight:   1.08;
  --leading-heading: 1.22;
  --leading-body:    1.75;
  --leading-relaxed: 1.9;

  /* ── SPACING (spacious / editorial, density 4) ───────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* Section rhythm — fluid so mobile does not become a scroll marathon */
  --section-y:   clamp(4.5rem, 11vh, 9rem);
  --section-y-l: clamp(6rem, 16vh, 13rem);
  --gutter:      clamp(1.25rem, 5vw, 5rem);

  /* ── MEASURE ─────────────────────────────────────────────── */
  --measure:        62ch;
  --measure-narrow: 46ch;
  --max-w:          1600px;
  --max-w-text:     720px;

  /* ── MOTION ──────────────────────────────────────────────────
     One language, used everywhere. Slow cinematic acceleration,
     no overshoot, no bounce.                                    */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out  */
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);     /* expo.inOut*/
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);     /* cubic.out */

  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  620ms;
  --dur-veil:  900ms;
  --dur-cine: 1200ms;

  /* ── ELEVATION ──────────────────────────────────────────────
     Shadow only, never a coloured glow.                        */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.65);

  /* ── GRAIN ──────────────────────────────────────────────────
     Cinematic noise. Kept very low — it should be felt, not seen.*/
  --grain-opacity: 0.032;

  /* ── LAYERS ─────────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-cursor:  900;
  --z-veil:    1000;

  /* ── CONTROLS ───────────────────────────────────────────────
     44px minimum touch target, enforced project-wide.          */
  --tap-min: 44px;
  --radius:  0;          /* The brand is hard-edged. Deliberate. */
  --radius-sm: 2px;
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════════
   Collapse every duration to a near-zero value rather than
   disabling transitions outright, so state changes still read
   as changes and nothing depends on a transitionend that never
   fires.                                                        */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  1ms;
    --dur-base:  1ms;
    --dur-slow:  1ms;
    --dur-veil:  1ms;
    --dur-cine:  1ms;
    --grain-opacity: 0;
  }
}

/* ═══ HIGH CONTRAST (accessibility panel) ═════════════════════ */
:root[data-contrast="high"] {
  --fg-primary:   #FFFFFF;
  --fg-secondary: #FFFFFF;
  --fg-muted:     #E4E8EB;
  --fg-faint:     #B8BFC6;
  --bg:           #000000;
  --bg-raised:    #000000;
  --bg-card:      #0A0B0C;
  --line-subtle:  rgba(255, 255, 255, 0.35);
  --line:         rgba(255, 255, 255, 0.55);
  --line-strong:  rgba(255, 255, 255, 0.85);
  --grain-opacity: 0;
}