/* =====================================================================
   SHOPIVA DESIGN SYSTEM — TOKENS
   Shared by index.html, track.html and offline.html.
   Everything visual is driven from here: colour, type, space, radius,
   elevation and motion. Change a token and the whole site follows.
===================================================================== */

:root{
  /* ── COLOUR ─────────────────────────────────────────────────────────
     Ink + Chalk base, Cobalt for everything interactive, Kola (a warm
     red-orange from the kola nut) as the single accent for urgency,
     badges and live states. */
  --sv-ink:        #0D0E0C;   /* PRIMARY — deep ink, slightly green-black */
  --sv-ink-2:      #181A17;   /* raised dark surface */
  --sv-ink-3:      #242722;   /* dark surface hover / lines on dark */
  --sv-chalk:      #F1EEE6;   /* SURFACE — page */
  --sv-paper:      #FAF8F3;   /* raised light surface (cards, modals) */
  --sv-stone:      #E4DFD2;   /* SURFACE ALT — wells, skeletons, borders */
  --sv-stone-2:    #D3CDBE;   /* stronger borders */
  --sv-text:       #0D0E0C;   /* TEXT */
  --sv-muted:      #5F5E56;   /* MUTED TEXT (5.3:1 on chalk) */
  --sv-on-dark:    #F1EEE6;
  --sv-on-dark-2:  rgba(241,238,230,.62);
  --sv-line-dark:  rgba(241,238,230,.14);
  --sv-cobalt:     #2A3BFF;   /* INTERACTIVE */
  --sv-cobalt-hi:  #1B29D6;   /* interactive hover/pressed */
  --sv-cobalt-lo:  #E4E7FF;   /* interactive tint */
  --sv-kola:       #FF5A2C;   /* ACTION accent — CTAs, counts, saved */
  --sv-gold:       #C9A24B;   /* SIGNATURE — fills, rules, text on dark */
  --sv-gold-hi:    #E3C16E;   /* gold highlight on dark */
  --sv-gold-mid:   #A07A1E;   /* gold for large text on light (3.4:1) */
  --sv-gold-deep:  #7A5F14;   /* gold for small text on light (5.2:1) */
  --sv-success:    #12794A;
  --sv-warning:    #A86A08;
  --sv-error:      #C4233B;

  /* Legacy variable names the original stylesheet and inline styles still
     use. They are remapped onto the new system so nothing is left in the
     old palette. */
  --acc:#2A3BFF; --acl:#4F5DFF; --acd:#1B29D6;
  --bk:#F1EEE6; --ob:#FAF8F3; --sf:#E9E5D9; --br:#D9D3C4;
  --wh:#0D0E0C; --gr:#5F5E56; --dk:#0D0E0C;

  /* ── TYPE ───────────────────────────────────────────────────────────
     Instrument Serif — high-contrast editorial display + big numerals.
     Bricolage Grotesque — variable-width grotesk for UI, labels, prices
     and the wordmark (it can run condensed or wide).               */
  --fd: 'Instrument Serif', 'Times New Roman', serif;
  --fu: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;

  --t-micro: .6875rem;   /* 11 */
  --t-small: .8125rem;   /* 13 */
  --t-body:  .9375rem;   /* 15 */
  --t-lead:  1.125rem;   /* 18 */
  --t-h3:    clamp(1.5rem, 2.2vw, 2rem);
  --t-h2:    clamp(2.25rem, 5.2vw, 4.75rem);
  --t-h1:    clamp(3rem, 9vw, 9rem);
  --t-mega:  clamp(5rem, 24vw, 26rem);

  /* ── SPACE (4pt base) ── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:72px; --s-9:112px; --s-10:160px;
  --gutter: clamp(18px, 4.2vw, 64px);

  /* ── SHAPE ── */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:24px; --r-xl:36px; --r-pill:999px;

  /* ── ELEVATION ── */
  --e-1: 0 1px 0 rgba(13,14,12,.04), 0 2px 8px rgba(13,14,12,.05);
  --e-2: 0 2px 4px rgba(13,14,12,.05), 0 12px 32px rgba(13,14,12,.10);
  --e-3: 0 4px 8px rgba(13,14,12,.06), 0 28px 80px rgba(13,14,12,.22);

  /* ── MOTION ──
     L1 micro 120–250ms · L2 component 300–600ms
     L3 section 700–1200ms · L4 signature 1200ms+              */
  --d-1:.18s; --d-2:.46s; --d-3:.9s; --d-4:1.4s;
  --ease-out:    cubic-bezier(.16,1,.3,1);      /* weighted, settles softly */
  --ease-inout:  cubic-bezier(.76,0,.24,1);     /* curtains / masks */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);  /* small overshoot */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce){
  :root{ --d-1:.01s; --d-2:.01s; --d-3:.01s; --d-4:.01s; }
}