/* =====================================================================
   KINESIS SPORT — Design tokens (landing Black Friday)
   Fonte: stili calcolati su https://www.kinesisport.com/ (misurati il 7 nov 2026)
   Regola: nei componenti si usano SOLO queste variabili, mai hex inline.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  /* ---------- Colori del brand (misurati sul sito) ---------- */
  --k-azzurro:        #00A4EF; /* accento: H1, bottoni, link, icone, eyebrow */
  --k-navy:           #243A5A; /* blu istituzionale: logo, titoli forti, bottone scuro */
  --k-navy-deep:      #042938; /* fascia scura (contatori, "Storia") → solo footer e barra fissa mobile */
  --k-ink:            #3C3950; /* titoli su fondo chiaro (H2–H5 del sito) */
  --k-text:           #5F727F; /* testo corrente su fondo chiaro */
  --k-text-on-dark:   #AAC1D1; /* testo corrente su fondo scuro */
  --k-white:          #FFFFFF;
  --k-mist:           #F4F7F6; /* fondo sezioni chiare alternate */
  --k-line:           #DFE5E8; /* bordi, divisori, bordo card */
  --k-grey-band:      #DEDEDE; /* fascia grigia (usata poco) */

  /* ---------- Derivati per la landing (NON presenti sul sito) ---------- */
  --k-navy-ink:       #021C27; /* navy-deep scurito del 30%: fondo hero BF */
  --k-azzurro-dark:   #0077B0; /* azzurro scurito: testo azzurro piccolo su bianco (AA) */
  --k-azzurro-tint:   #E6F6FD; /* azzurro al 10%: fondo badge/chip su bianco */

  /* ---------- Ruoli semantici ---------- */
  --bg-page:          var(--k-white);
  --bg-alt:           var(--k-mist);
  --bg-dark:          var(--k-navy-deep);
  --bg-darker:        var(--k-navy-ink);
  --heading:          var(--k-ink);
  --heading-strong:   var(--k-navy);
  --body:             var(--k-text);
  --accent:           var(--k-azzurro);
  --price-now:        var(--k-navy);       /* su card bianca */
  --price-was:        var(--k-text);
  --cta-bg:           var(--k-azzurro);
  --cta-text-on-dark: var(--k-navy-deep);  /* bottone azzurro su fondo scuro: testo navy (contrasto 5.5:1) */
  --cta-text-on-light:var(--k-white);      /* come sul sito; vedi nota contrasto nel DESIGN-SYSTEM.md */

  /* ---------- Tipografia ---------- */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
  --tracking-heading: 0.05em;   /* tutti i titoli del sito: letter-spacing = 5% della taglia */

  /* Scala mobile-first (mobile → desktop con clamp) */
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.125rem); /* 36 → 50px  H1 */
  --fs-h2:      clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);  /* 24 → 36px */
  --fs-h3:      clamp(1.25rem, 1.05rem + 1vw, 1.75rem);   /* 20 → 28px  (peso 300) */
  --fs-h4:      clamp(1.125rem, 1rem + .6vw, 1.5rem);     /* 18 → 24px */
  --fs-h5:      1.1875rem;                                /* 19px card title */
  --fs-eyebrow: 1rem;                                     /* 16px H6 300 azzurro */
  --fs-lead:    1.125rem;                                 /* 18px */
  --fs-body:    1rem;                                     /* 16px */
  --fs-small:   0.875rem;                                 /* 14px */
  --lh-heading: 1.38;   /* 50/69 del sito */
  --lh-body:    1.5625; /* 25/16 del sito */

  /* ---------- Spaziatura (base 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --section-y: clamp(48px, 6vw, 80px);  /* sito: 50px */
  --gutter:    16px;                    /* margine laterale mobile */
  --container: 1170px;                  /* contenuto utile del sito (1212 - 2×21) */

  /* ---------- Forme ---------- */
  --radius-0:   0px;   /* bottoni: SQUADRATI come sul sito */
  --radius-sm:  3px;   /* input, bottoni secondari piccoli */
  --radius-md:  8px;   /* card prodotto (scelta landing) */
  --radius-pill: 999px;/* badge sconto */
  --shadow-card: 0 6px 24px rgb(4 41 56 / .10);
  --shadow-card-hover: 0 12px 32px rgb(4 41 56 / .18);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}