/* ==========================================================================
   Italia Softair — token del design system (colori, tipografia, spazi, temi)

   Fonte unica dei valori, condivisa da chi disegna con la grafica del sito:
     - il sito pubblico (public/site/ds.css, che li usa e basta);
     - il portale tesseramenti (public/tesseramenti/tess.css, che ci lega
       le variabili di Bootstrap).
   Si carica PRIMA del foglio che li usa. Un colore nuovo nasce qui, in
   entrambi i temi, e poi si usa per nome.

   I valori sono quelli dell'app (lib/core/theme.dart): stesso rosso, stessi
   neri, stessa scala di spazi. Tema scuro di serie, chiaro con
   data-theme="light" su <html> o, senza scelta salvata, dal sistema.
   ========================================================================== */

/* ── 1. TOKEN ─────────────────────────────────────────────────────────── */

:root {
    /* Brand (theme.dart: kPrimaryColor, kPrimaryLightColor, kPrimaryDarkColor) */
    --color-primary: #AD2C2B;
    --color-primary-light: #C9403F;
    --color-primary-dark: #7B180F;
    --color-on-primary: #FFFFFF;

    /* Testo chiaro su fondo rosso (banda dell'app, pannelli accentati) */
    --color-on-primary-soft: #FFE9E8;
    --color-on-primary-muted: #FFD9D8;
    /* Fondo dei loghi caricati dai club: bianco in entrambi i temi */
    --color-paper: #FFFFFF;
    /* Coccarda "scheda perfetta" */
    --color-gold: #E3B341;

    /* Discipline (kCatSoftair, kCatSpeedsoft, kCatXtag) */
    --color-softair: #AD2C2B;
    --color-speedsoft: #6A2D75;
    --color-xtag: #CE5630;
    --color-on-speedsoft: #F1E3F4;

    /* Tipografia: Lato come l'app, mono solo per le etichette "da briefing" */
    --font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-2xs: .6875rem;  /* 11 — etichette mono */
    --text-xs: .75rem;     /* 12 */
    --text-sm: .875rem;    /* 14 */
    --text-md: .9375rem;   /* 15 */
    --text-lg: 1.0625rem;  /* 17 */
    --text-xl: 1.1875rem;  /* 19 */
    --text-2xl: 1.375rem;  /* 22 */
    --display-1: clamp(2.75rem, 6.4vw, 5.25rem);   /* hero */
    --display-2: clamp(2.125rem, 4.2vw, 3.25rem);  /* titolo di sezione */
    --display-3: clamp(1.5rem, 2.4vw, 2rem);       /* titolo di blocco */
    --display-num: clamp(2.25rem, 3.6vw, 2.75rem); /* numeri della striscia */

    --weight-light: 300;
    --weight-regular: 400;
    --weight-bold: 700;
    --weight-black: 900;
    --tracking-mono: .12em;
    --tracking-tight: -.02em;

    /* Spazi (DsSpace dell'app: 4 8 12 16 20 24 32, poi i grandi del sito) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 96px;

    /* Raggi */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Ombre */

    /* Layout */
    --container: 1280px;
    --gutter: var(--space-7);
    --header-h: 88px;

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

    /* Livelli */
    --z-header: 50;
    --z-cookie: 80;
    --z-dialog: 90;
}

@media (max-width: 767.98px) {
    :root { --gutter: var(--space-4); --header-h: 72px; }
}

/* ── 1b. TEMI ─────────────────────────────────────────────────────────────
   Scuro di serie; chiaro con `data-theme="light"` su <html> (scelta
   dell'utente, salvata) o, senza scelta, se il sistema è in chiaro.
   Cambiano solo i token qui sotto: i componenti non sanno quale tema c'è.

   COMPONENTI SEMPRE SCURI: chi sta sopra una foto o su un fondo pieno di
   colore (hero, testate con la copertina, header sopra la foto — solo con
   `--on-dark`: sovrapposto a una testata chiara segue il tema —, banda e
   riquadri rossi, lightbox, didascalie sulle foto) tiene i token scuri in
   entrambi i temi: il testo bianco sulla foto velata è il punto. Per
   aggiungerne uno: il selettore nella lista qui sotto, oppure la classe
   `.scheme-dark` sul contenitore. */
:root,
.scheme-dark,
.hero, .profile, .site-header--on-dark, .app-band, .lightbox,
.cta-card, .panel--accent, .panel--speedsoft, .club-card__live, .shot__info {
    color-scheme: dark;
    /* Fondi e superfici (kDarkBg, kSurfaceDark) */
    --color-bg: #111111;
    --color-surface: #141417;
    --color-surface-2: #1C1C20;
    --color-line: rgba(255, 255, 255, .08);
    --color-line-strong: rgba(255, 255, 255, .22);

    /* Testo su scuro */
    --color-ink: #FFFFFF;
    --color-ink-soft: #D4D4D8;
    --color-ink-muted: #A1A1AA;
    --color-ink-faint: #71717A;
    /* Testo su chiaro (kInk) — badge bianchi, pulsanti chiari */
    --color-ink-dark: #17171A;

    /* Accenti (kMilitaryGreen, kRecordingGreenGlow) */
    --color-military: #3A4A2F;
    --color-on-military: #DCE6CF;
    --color-live: #9ACD32;

    /* Il rosso del brand su fondo nero, per il TESTO piccolo: #AD2C2B lì
       scende sotto 4.5:1. È lo stesso rosso, schiarito quanto basta. */
    --color-signal: #E0504F;
    /* Pulsante "in contrasto" col fondo (bianco su scuro, nero su chiaro) */
    --color-contrast: #FFFFFF;
    --color-on-contrast: #17171A;
    /* Trame e vetri */
    --tex-line: rgba(255, 255, 255, .045);
    --tex-contour: rgba(255, 255, 255, .09);
    --color-bg-glass: rgba(17, 17, 17, .94);
    --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, .7);

    /* Toni di stato: fondo, bordo, testo. Avvisi, esiti dei moduli, chip. */
    --tone-ok-bg: #1C2A12;   --tone-ok-line: #3F5A26;   --tone-ok-ink: #CDE9B0;
    --tone-err-bg: #2E1414;  --tone-err-line: #6B2423;  --tone-err-ink: #F6C3C2;
    --tone-warn-bg: #2A2210; --tone-warn-line: #5C4A1A; --tone-warn-ink: #F5DFA8;
    --tone-warn-strong: #4A3410; --tone-warn-strong-ink: #F5C77A;
    --tone-info-bg: #14202E; --tone-info-line: #27405A; --tone-info-ink: #C6DBF2;

}
/* Il colore del testo si eredita già calcolato: chi resta scuro dentro una
   pagina chiara deve ridichiararlo, o erediterebbe l'inchiostro scuro. */
.scheme-dark,
.hero, .profile, .site-header--on-dark, .app-band, .lightbox,
.cta-card, .panel--accent, .panel--speedsoft, .club-card__live, .shot__info { color: var(--color-ink); }

:root[data-theme="light"] {
    color-scheme: light;
    /* Fondi e superfici (kScaffoldLight, kSurface, kFieldFillLight) */
    --color-bg: #F4F4F6;
    --color-surface: #FFFFFF;
    --color-surface-2: #EFEFF2;
    --color-line: #E7E7EA;
    --color-line-strong: #D9D9DE;
    /* Testo su chiaro (kInk, kInkSoft, kInkFaint) */
    --color-ink: #17171A;
    --color-ink-soft: #33333A;
    --color-ink-muted: #6B6B72;
    --color-ink-faint: #85858C;
    --color-ink-dark: #17171A;
    --color-military: #3A4A2F;
    --color-on-military: #DCE6CF;
    --color-live: #3F7A1F;
    --color-signal: #AD2C2B;
    --color-contrast: #17171A;
    --color-on-contrast: #FFFFFF;
    --tex-line: rgba(23, 23, 26, .05);
    --tex-contour: rgba(23, 23, 26, .08);
    --color-bg-glass: rgba(244, 244, 246, .94);
    --shadow-float: 0 24px 60px -28px rgba(23, 23, 26, .28);
    --tone-ok-bg: #E9F4DF;   --tone-ok-line: #C7E2AE;   --tone-ok-ink: #2F5A17;
    --tone-err-bg: #FBE9E9;  --tone-err-line: #F0C3C2;  --tone-err-ink: #8A1F1E;
    --tone-warn-bg: #FFF5E0; --tone-warn-line: #F1DAA2; --tone-warn-ink: #6E4B00;
    --tone-warn-strong: #FFF0D6; --tone-warn-strong-ink: #8A4B00;
    --tone-info-bg: #E7F0FA; --tone-info-line: #BFD6EF; --tone-info-ink: #1D4E7E;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        /* Fondi e superfici (kScaffoldLight, kSurface, kFieldFillLight) */
        --color-bg: #F4F4F6;
        --color-surface: #FFFFFF;
        --color-surface-2: #EFEFF2;
        --color-line: #E7E7EA;
        --color-line-strong: #D9D9DE;
        /* Testo su chiaro (kInk, kInkSoft, kInkFaint) */
        --color-ink: #17171A;
        --color-ink-soft: #33333A;
        --color-ink-muted: #6B6B72;
        --color-ink-faint: #85858C;
        --color-ink-dark: #17171A;
        --color-military: #3A4A2F;
        --color-on-military: #DCE6CF;
        --color-live: #3F7A1F;
        --color-signal: #AD2C2B;
        --color-contrast: #17171A;
        --color-on-contrast: #FFFFFF;
        --tex-line: rgba(23, 23, 26, .05);
        --tex-contour: rgba(23, 23, 26, .08);
        --color-bg-glass: rgba(244, 244, 246, .94);
        --shadow-float: 0 24px 60px -28px rgba(23, 23, 26, .28);
        --tone-ok-bg: #E9F4DF;   --tone-ok-line: #C7E2AE;   --tone-ok-ink: #2F5A17;
        --tone-err-bg: #FBE9E9;  --tone-err-line: #F0C3C2;  --tone-err-ink: #8A1F1E;
        --tone-warn-bg: #FFF5E0; --tone-warn-line: #F1DAA2; --tone-warn-ink: #6E4B00;
        --tone-warn-strong: #FFF0D6; --tone-warn-strong-ink: #8A4B00;
        --tone-info-bg: #E7F0FA; --tone-info-line: #BFD6EF; --tone-info-ink: #1D4E7E;
}
}