/* =========================================================================
   Aurora 76 Runners — Design tokens
   Concetto: "aurora" = alba. Notte blu → luce che sale.
   Ogni coppia colore/sfondo di questo file è stata misurata: WCAG 2.2 AA.
   ========================================================================= */

:root {
  /* ---- Blu Aurora (identità) ---------------------------------------- */
  --blu-900: #0b1547;   /* 17.32:1 su bianco — sezioni scure, footer        */
  --blu-800: #172983;   /* 12.49:1 — BRAND primario, header, titoli         */
  --blu-700: #24399e;   /*  9.75:1 — hover su superfici blu                 */
  --blu-600: #3450bd;   /*  6.93:1 — bordi attivi, focus                    */

  /* ---- Azzurro (accento freddo) -------------------------------------- */
  --azzurro-600: #0077ad; /* 4.95:1 — l'unico azzurro ammesso per il testo  */
  --azzurro-500: #009de0; /* 3.04:1 — solo testo ≥24px o elementi grafici   */
  --azzurro-300: #84d0f1; /* 1.71:1 — MAI testo bianco sopra                */
  --azzurro-100: #e3f4fc; /* superfici tenui                                */

  /* ---- Alba (accento caldo, CTA) ------------------------------------- */
  /* Aggiunta alla palette del doc 01 §8. Motivo: serve un colore di azione
     ad alto contrasto che non sia blu, e "alba" è il nome del gruppo.      */
  --alba-700: #a8340a;  /*  6.64:1 — hover CTA                              */
  --alba-600: #c2410c;  /*  5.18:1 — CTA PRIMARIA, testo bianco sopra: OK   */
  --alba-500: #e8590c;  /*  3.58:1 — grafica, bordi, testo ≥24px            */
  --alba-400: #ff8b3d;  /*  su blu-900 → 7.43:1 — accento in dark mode      */

  /* ---- Neutri --------------------------------------------------------- */
  --testo:       #1a1a1a;  /* 17.40:1 */
  --testo-muto:  #5b6474;  /*  5.97:1 — conforme anche per testo piccolo    */
  --bordo:       #dfe3ea;
  --bordo-forte: #c3cad6;
  --superficie:  #f6f8fb;
  --bianco:      #ffffff;

  /* ---- Semantici ------------------------------------------------------ */
  --ok:      #1a7f4b;  /* 5.02:1 */
  --attesa:  #8a5a00;  /* 5.93:1 */
  --errore:  #b3261e;  /* 6.54:1 */

  /* ---- Link ----------------------------------------------------------- */
  --link:       #0b5fa5;  /* 6.57:1 — sostituisce #8f8b8a (3.37:1, non conforme) */
  --link-hover: #093f6e;  /* 10.78:1 — sostituisce #11a2e1 (2.88:1)             */

  /* ---- Tipografia ----------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-testo:   'Inter', system-ui, -apple-system, sans-serif;

  /* Scala fluida: min a 360px, max a 1280px. Nessun media query. */
  --t-xs:   0.8125rem;                              /* 13px   fisso */
  --t-sm:   0.875rem;                               /* 14px   fisso */
  --t-base: clamp(1rem,      0.96rem + 0.18vw, 1.0625rem);
  --t-lg:   clamp(1.125rem,  1.06rem + 0.30vw, 1.25rem);
  --t-xl:   clamp(1.375rem,  1.24rem + 0.60vw, 1.75rem);
  --t-2xl:  clamp(1.75rem,   1.50rem + 1.10vw, 2.5rem);
  --t-3xl:  clamp(2.25rem,   1.80rem + 2.00vw, 3.5rem);
  --t-4xl:  clamp(2.75rem,   1.90rem + 3.80vw, 5.5rem);

  --lh-stretta: 0.95;
  --lh-titolo:  1.12;
  --lh-corpo:   1.65;

  /* ---- Spaziature: scala modulare 4px --------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Ritmo verticale delle sezioni, fluido */
  --sezione: clamp(3rem, 1.8rem + 5vw, 6.5rem);

  /* ---- Struttura ------------------------------------------------------ */
  --contenuto: 1200px;   /* max-width del contenuto */
  --stretto:   720px;    /* testo lungo e form      */
  --gutter:    clamp(1rem, 0.4rem + 2.4vw, 2.5rem);

  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-full: 999px;

  --ombra-1: 0 1px 2px rgba(11,21,71,.06), 0 1px 3px rgba(11,21,71,.08);
  --ombra-2: 0 4px 6px rgba(11,21,71,.05), 0 10px 20px rgba(11,21,71,.08);
  --ombra-3: 0 12px 24px rgba(11,21,71,.10), 0 24px 48px rgba(11,21,71,.12);

  --transizione: 180ms cubic-bezier(.2,.7,.3,1);

  /* ---- Ruoli (usati dai componenti) ----------------------------------- */
  --sfondo:        var(--bianco);
  --sfondo-alt:    var(--superficie);
  --su-sfondo:     var(--testo);
  --su-sfondo-muto:var(--testo-muto);
  --linea:         var(--bordo);
  --accento:       var(--blu-800);
  --azione:        var(--alba-600);
  --azione-hover:  var(--alba-700);
}

/* ---- Dark mode: cambiano i ruoli, non i token di marca ----------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo:         #080f2e;
    --sfondo-alt:     #101a4d;
    --su-sfondo:      #eef1f8;
    --su-sfondo-muto: #a8b2c8;   /* 7.9:1 su --sfondo */
    --linea:          #22306b;
    --bordo:          #22306b;
    --bordo-forte:    #34448a;
    --superficie:     #101a4d;
    --accento:        var(--azzurro-300);
    --azione:         var(--alba-400);   /* 7.43:1 su blu-900 */
    --azione-hover:   #ffa565;
    --link:           #8fc6f5;
    --link-hover:     #b9dcfa;
    --bianco:         #0b1547;           /* "superficie card" in dark */
  }
}
:root[data-tema="scuro"] {
  --sfondo:#080f2e; --sfondo-alt:#101a4d; --su-sfondo:#eef1f8; --su-sfondo-muto:#a8b2c8;
  --linea:#22306b; --bordo:#22306b; --bordo-forte:#34448a; --superficie:#101a4d;
  --accento:var(--azzurro-300); --azione:var(--alba-400); --azione-hover:#ffa565;
  --link:#8fc6f5; --link-hover:#b9dcfa; --bianco:#0b1547;
}

/* ---- Reset minimo ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: var(--lh-corpo);
  color: var(--su-sfondo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: var(--lh-titolo);
              font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

/* Focus: sempre visibile, mai rimosso senza sostituto */
:focus-visible {
  outline: 3px solid var(--azzurro-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Utility di struttura ---------------------------------------------- */
.contenitore { width: 100%; max-width: var(--contenuto); margin-inline: auto;
               padding-inline: var(--gutter); }
.stretto     { max-width: var(--stretto); }
.sezione     { padding-block: var(--sezione); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.salta-al-contenuto {
  position:absolute; left:var(--s-4); top:-100px; z-index:999;
  background:var(--blu-800); color:#fff; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md); font-weight:600; transition:top var(--transizione);
}
.salta-al-contenuto:focus { top:var(--s-4); color:#fff; }