/* ============================================================
   AUROLABS DESIGN TOKENS
   Extracted from vaekstgroup.se (Webflow) — 2026-06-16
   Source palette = :root vars on the live site. Names kept
   semantic so products can re-skin without touching components.
   ============================================================ */

:root {
  /* --- Raw palette (verbatim from vaekstgroup.se) --- */
  --c-sand:      #e7e4dc; /* --bg     : warm light page bg */
  --c-cream:     #f0eeed; /* --torpedo: off-white surface */
  --c-taupe:     #979086; /* --brown  : primary action / muted accent */
  --c-ink:       #2b2b2b; /* --grey   : near-black body text */
  --c-ink-2:     #3b3b3b; /* --grey-2 */
  --c-charcoal:  #1a1a1a; /* dark sections + CTA block */
  --c-slate:     #3e454e; /* --dark-slate-grey */
  --c-midnight:  #1b293c; /* --midnight-blue : deep accent */
  --c-olive:     #454e3e; /* --green */
  --c-maroon:    #3c2f31; /* --dark-red */
  --c-dim:       #6b5c5a; /* --dim-grey */
  --c-muted:     #b2b2b2; /* overline label gray */
  --c-line:      #ddd;
  --c-white:     #fff;
  --c-black:     #000;
  --c-indigo:    #393b6a; /* shadow tint only */

  /* --- Semantic aliases (use THESE in components) --- */
  --bg:           var(--c-sand);
  --surface:      var(--c-cream);
  --surface-dark: var(--c-charcoal);
  --text:         var(--c-ink);
  --text-invert:  var(--c-white);
  --text-muted:   var(--c-muted);
  --accent:       var(--c-taupe);
  --accent-text:  var(--c-white);
  --border:       var(--c-line);
  --border-dark:  #ffffff26;

  /* --- Type --- */
  /* Live site uses Soleil + Calibre (commercial, Adobe Typekit).
     Template ships Jost as the free Google-Fonts substitute that
     matches the geometric-humanist feel (knack.fyi already uses it).
     Swap --font-display to "soleil" once a Typekit license is wired. */
  --font-display: 'Jost', 'Soleil', system-ui, sans-serif;
  --font-body:    'Jost', 'Soleil', system-ui, sans-serif;

  /* Fluid scale: desktop max → mobile min (matches site breakpoints) */
  --fs-overline: 0.875rem;                       /* 14px, tracked, uppercase */
  --fs-h1:  clamp(2.375rem, 5.5vw, 4.5rem);      /* 38 → 72 */
  --fs-h2:  clamp(2.375rem, 4.5vw, 3.5rem);      /* 38 → 56 */
  --fs-mega: clamp(2.5rem, 4vw, 3.3125rem);      /* 40 → 53 */
  --fs-h3:  clamp(1.625rem, 2.5vw, 2rem);        /* 26 → 32 */
  --fs-h4:  1.5rem;                              /* 24 */
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem);   /* 17 → 20 */
  --fs-body: 1.0625rem;                          /* 17 */
  --fs-small: 0.9375rem;                         /* 15 */

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;

  --ls-tight:   -0.04em;  /* big display headings */
  --ls-tight-2: -0.02em;
  --ls-wide:     0.08em;  /* uppercase overline labels */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;

  /* --- Layout --- */
  --container: 1280px;
  --gutter: 5%;
  --section-py: clamp(4rem, 9vw, 10rem);  /* site uses 10em / 72px clamp */

  /* --- Shape: sharp by design --- */
  --radius: 0;
  --radius-pill: 100px;
  --radius-round: 50%;

  /* --- Motion --- */
  --t-fast: 0.2s ease;
  --t:      0.3s ease;
  --t-slow: 0.4s ease;

  /* --- Elevation: soft, large, tinted --- */
  --shadow-soft: 45px 45px 140px -48px #393b6a1f;
  --shadow-card: 25px 25px 64px -14px #4d4d4d29;
  --shadow-focus: 0 0 0 2px var(--c-white);
}