/* ==========================================================================
   MILEX d.o.o. — DESIGN TOKENS
   Single source of truth for colour, type, layout and motion.
   Values measured from the ingvar.si reference DOM; brand hues sampled from
   assets/images/milex-logo.png (62.4% of logo pixels are #010298).
   Nothing but custom properties belongs in this file.
   ========================================================================== */

:root {

  /* ---- Brand -------------------------------------------------------- */
  --milex-blue:        #010298;   /* primary: buttons, CTA, accents        */
  --milex-blue-dark:   #01016B;   /* button hover                          */
  --milex-blue-light:  #2F30AB;   /* secondary accent, focus ring          */
  --milex-blue-050:    #F2F3F9;   /* light section band                    */
  --milex-blue-100:    #DDDEF0;   /* decorative band + chip background     */

  /* ---- Neutrals ----------------------------------------------------- */
  --ink:               #1C1C2E;   /* body text, footer background          */
  --ink-overlay:       rgba(28, 28, 46, .75);  /* card image overlay bar   */
  --paper:             #FFFFFF;
  --paper-soft:        #F8F8F8;   /* text on dark, light sections          */
  --paper-grey:        #F1F1F1;   /* alternating category block band       */
  --muted:             #8A8A99;   /* non-text UI: dots, rules, dividers    */

  /* #8A8A99 is 3.40:1 on white — fine for UI furniture (needs 3:1) but short
     of the 4.5:1 that body-size text needs. Anything that is actually read
     uses this darker sibling instead: 4.99:1 on white, same hue family. */
  --muted-text:        #6E6E80;   /* breadcrumb, inactive lang, fine print */
  --accent-warn:       #E2A400;   /* SALE badges only — do not reuse       */

  /* Derived neutrals (kept here so no component invents its own alpha) */
  --hairline:          rgba(28, 28, 46, .08);
  --hairline-strong:   rgba(28, 28, 46, .12);
  --ink-on-dark-muted: rgba(248, 248, 248, .62);

  /* ---- Typography --------------------------------------------------- */
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --lh:           1.7;            /* universal line-height, whole site     */

  --fs-body:      16px;
  --fs-lead:      18px;
  --fs-small:     14px;
  --fs-btn:       15px;

  /* Fixed reference sizes (the ceiling values of the fluid ramps below) */
  --fs-h1-page:   25px;
  --fs-h1-hero:   40px;
  --fs-h2:        35px;
  --fs-h3:        24px;

  /* Fluid ramps — one clamp() per level instead of a media-query stack.
     Each ramp hits its reference size at 1440px and its floor at 768px. */
  --fs-h1-page-fluid: clamp(22px, 0.45vw + 18.5px, 25px);
  --fs-h1-hero-fluid: clamp(28px, 2.20vw +  8.3px, 40px);
  --fs-h2-fluid:      clamp(26px, 1.34vw + 15.7px, 35px);
  --fs-h3-fluid:      clamp(20px, 0.60vw + 15.4px, 24px);

  --tracking-btn: .03em;

  /* ---- Layout ------------------------------------------------------- */
  --container:    1720px;
  --gutter:       90px;           /* stepped down at the breakpoints below */
  --grid-gap:     35px;
  --radius:       0;              /* square everywhere — no exceptions     */

  /* Vertical rhythm */
  --space-section:      110px;    /* gap between major homepage sections   */
  --space-section-tight: 70px;

  /* ---- Chrome ------------------------------------------------------- */
  /* The rendered height of .c-header at each tier. The header is injected by
     JavaScript, so this is what the empty element reserves — get it wrong and
     <main> jumps the moment the header appears. Measured, not estimated. */
  --header-h:     165px;          /* desktop, two rows                     */
  --z-widget:     500;
  --z-overlay:    900;
  --z-preloader:  9999;

  /* ---- Motion ------------------------------------------------------- */
  --t-fast:   .2s;
  --t-media:  .25s;
  --t-slow:   .4s;
  --t-hero:   .9s;                /* hero slide crossfade                  */
  --ease:     ease;
  --ease-inout: ease-in-out;
}

/* Reduced gutters on narrower viewports. Declared here so every consumer of
   var(--gutter) — container, full-bleed bands, widgets — follows along. */
@media (max-width: 1439px) { :root { --gutter: 48px; --space-section: 90px; } }
/* 992–1119: the nav row compresses, so the header is 10px shorter. */
@media (max-width: 1119px) { :root { --header-h: 155px; } }
@media (max-width: 991px)  { :root { --gutter: 32px; --space-section: 72px; --header-h: 84px; } }
@media (max-width: 479px)  { :root { --gutter: 20px; --space-section: 60px; } }