/*
 * Gestionale Nuoto UISP — Design token e reset
 *
 * Restyling ondata 0 (docs/restyling/01_DESIGN_SYSTEM.md):
 *   - tema "corsia"   (chiaro, predefinito ovunque, giorno di gara compreso dal 10/10/2026)
 *   - tema "notturna" (scuro, scelto dall'utente nel guscio di gara; tabellone pubblico)
 *
 * Token nuovi: --c-* colori, --t-* tipografia, --s-* spazi, --r-* raggi,
 * --e-* elevazione, --m-* movimento. Le pagine nuove usano SOLO questi.
 *
 * Gli alias storici (--slate-*, --aqua-*, --deep-*, --primary, --text-muted…) sono stati
 * tolti con la ristrutturazione grafica 2026-10: nessun foglio li usa più.
 */

/*
 * Ristrutturazione grafica 2026-10 — «Segnaletica di vasca»
 * (docs/restyling/01_DESIGN_SYSTEM.md): ogni colore ha un solo significato.
 *   azione  = blu cobalto (--c-action, --c-info per i link)
 *   dal vivo = arancio    (--c-live*)
 *   confermato = verde    (--c-success / --c-ok)
 *   attenzione = ambra    (--c-caution / --c-warn)
 *   errore  = rosso       (--c-danger)
 *   marchio = verde UISP  (--c-brand), solo guscio e logo
 * Contrasti calcolati con la formula WCAG: testo >= 4,5:1, bordi dei controlli >= 3:1.
 */
:root,
[data-theme="corsia"] {
    color-scheme: light;

    /* ── Colori semantici ─────────────────────────────── */
    --c-ground: #F3F6F9;          /* fondo a piastrelle */
    --c-surface: #FFFFFF;
    --c-surface-alt: #EEF2F6;     /* righe alterne, intestazioni leggere */
    --c-sunken: #E8EEF4;          /* piastrella numerale, intestazioni di tabella */
    --c-line: #C9D5E0;            /* solo divisori decorativi (1,49:1) */
    --c-line-strong: #74869A;     /* bordo di campi e controlli: 3,74:1 su bianco */
    --c-ink: #0E1B2A;             /* 17,4:1 */
    --c-ink-muted: #44546A;       /* 7,7:1 */
    --c-ink-subtle: #5D6B7E;      /* 5,4:1 su bianco, 4,8:1 su surface-alt */
    --c-brand: #006B2E;           /* verde UISP: testo bianco 6,7:1 */
    --c-brand-ink: #FFFFFF;
    --c-brand-raised: #0B5A2A;
    --c-brand-muted: #DDF3E5;     /* testo secondario sul verde: 5,7:1 */
    --c-brand-soft: #E3F5E8;
    --c-brand-bright: #009640;    /* verde del logo UISP: solo dettagli senza testo */
    --c-action: #1A56A8;          /* testo bianco 7,1:1 */
    --c-action-hover: #154789;
    --c-action-bright: #2F6FD0;   /* solo accenti non testuali */
    --c-action-soft: #E3EDFA;     /* action sopra 6,0:1 */
    --c-action-ink: #FFFFFF;
    --c-info: #1A56A8;            /* link */
    --c-info-hover: #154789;
    --c-info-soft: #E3EDFA;
    --c-live: #B03A0A;            /* testo «dal vivo»: 6,1:1 */
    --c-live-soft: #FDEBDD;       /* live sopra 5,2:1 */
    --c-live-mark: #F2701D;       /* punto e barra dal vivo, mai testo */
    --c-warn: #7A5200;            /* attenzione: 6,0:1 sul suo fondo */
    --c-warn-soft: #FCEFC7;
    --c-caution: #7A5200;
    --c-caution-soft: #FCEFC7;
    --c-danger: #B3151F;          /* 5,7:1 sul suo fondo; bianco sopra 6,9:1 */
    --c-danger-soft: #FCE4E5;
    --c-danger-ink: #FFFFFF;
    --c-success: #0F6B34;         /* 5,6:1 sul suo fondo */
    --c-success-soft: #DDF2E4;
    --c-ok: var(--c-success);
    --c-ok-soft: var(--c-success-soft);
    --c-focus: #1A56A8;
    --c-overlay: rgba(14, 27, 42, 0.5);
    --c-tile-grout: rgba(14, 27, 42, 0.045);

    /* ── Tipografia ──────────────────────────────────── */
    --t-display: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --t-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --t-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --t-ui: var(--t-body);
    --t-num: var(--t-mono);
    --t-display-stretch: 100%;
    /* scala: 12 solo note d'ufficio; 14 minimo in gara; 22 minimo su proiettore */
    --t-12: 0.75rem;
    --t-14: 0.875rem;
    --t-16: 1rem;
    --t-18: 1.125rem;
    --t-22: 1.375rem;
    --t-28: 1.75rem;
    --t-36: 2.25rem;
    --t-48: 3rem;
    --t-64: 4rem;
    --t-96: 6rem;

    /* ── Spazi, raggi, elevazione, movimento, livelli ── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;
    --s-10: 72px;
    --r-xs: 4px;                  /* badge, chip, piastrella */
    --r-sm: 8px;                  /* campi */
    --r-md: 8px;                  /* pulsanti, voci di menu */
    --r-lg: 12px;                 /* card, modali, pannelli */
    --r-xl: 12px;
    --r-pill: 999px;
    --e-1: 0 1px 2px rgba(14, 27, 42, 0.08), 0 4px 12px rgba(14, 27, 42, 0.08);
    --e-2: 0 12px 32px rgba(14, 27, 42, 0.18);
    --m-fast: 120ms;              /* pressione */
    --m-base: 180ms;              /* passaggio, menu */
    --m-panel: 240ms;             /* modale, pannello */
    --m-flash: 600ms;             /* dato arrivato dal vivo */
    --m-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --z-sticky: 10;
    --z-dropdown: 20;
    --z-rail: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-toast: 60;
    --h-control-sm: 36px;
    --h-control: 44px;
    --h-control-lg: 52px;
    --h-control-xl: 64px;

    /* ── Guscio ──────────────────────────────────────── */
    --shell-rail-width: 96px;
    --shell-panel-width: 280px;
    --shell-topbar-height: 72px;
}

[data-theme="notturna"] {
    color-scheme: dark;

    --c-ground: #0A1622;
    --c-surface: #112131;
    --c-surface-alt: #0D1B29;
    --c-sunken: #0D1B29;
    --c-line: #2A3D52;
    --c-line-strong: #5A7088;     /* 3,2:1 su surface */
    --c-ink: #EAF1F7;             /* 14,3:1 */
    --c-ink-muted: #AFC0D1;       /* 8,8:1 */
    --c-ink-subtle: #93A6BA;      /* 6,5:1 */
    --c-brand: #0F3A22;
    --c-brand-ink: #EAF1F7;       /* 11,2:1 */
    --c-brand-raised: #1A3A28;
    --c-brand-muted: #AFC0D1;     /* 6,8:1 sul marchio */
    --c-brand-soft: #0F2A1C;
    --c-brand-bright: #3DBE6E;
    --c-action: #7DB2FF;          /* testo scuro sopra 8,4:1 */
    --c-action-hover: #A4C9FF;
    --c-action-bright: #7DB2FF;
    --c-action-soft: #13304F;     /* action sopra 6,2:1 */
    --c-action-ink: #0A1622;
    --c-info: #7DB2FF;
    --c-info-hover: #A4C9FF;
    --c-info-soft: #13304F;
    --c-live: #FF9A57;            /* 7,8:1 */
    --c-live-soft: #2A1A10;
    --c-live-mark: #FF9A57;
    --c-warn: #F5C451;            /* 10,0:1 */
    --c-warn-soft: #2A2210;
    --c-caution: #F5C451;
    --c-caution-soft: #2A2210;
    --c-danger: #FF7A7F;          /* 6,5:1 */
    --c-danger-soft: #2E1418;
    --c-danger-ink: #1A0A0C;
    --c-success: #5CD38A;         /* 8,7:1 */
    --c-success-soft: #0F2A1C;
    --c-focus: #7DB2FF;
    --c-overlay: rgba(0, 0, 0, 0.6);
    --c-tile-grout: rgba(255, 255, 255, 0.03);

    --e-1: none;
    --e-2: none;
}

/* ── Reset ─────────────────────────────────────────── */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--t-16);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--t-body);
    font-size: var(--t-16);
    line-height: 1.5;
    color: var(--c-ink);
    background-color: var(--c-ground);
    /* fuga delle piastrelle: griglia di 24px appena percettibile */
    background-image:
        linear-gradient(var(--c-tile-grout) 1px, transparent 1px),
        linear-gradient(90deg, var(--c-tile-grout) 1px, transparent 1px);
    background-size: 24px 24px;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--t-display);
    font-stretch: var(--t-display-stretch);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
    text-wrap: balance;
}

a {
    color: var(--c-info);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--m-fast) ease-out;
}

a:hover {
    color: var(--c-info-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

code, kbd, samp, pre {
    font-family: var(--t-mono);
}

[hidden] {
    display: none !important;
}

/* ── Utility di base ───────────────────────────────── */

.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;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ── Accessibilità globale ─────────────────────────── */

.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: calc(var(--z-toast) + 10);
    padding: 12px 20px;
    background: var(--c-brand);
    color: var(--c-brand-ink);
    text-decoration: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 600;
    font-size: var(--t-16);
    transition: top var(--m-fast) ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    color: var(--c-brand-ink);
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 1px;
}

#main-content:focus {
    outline: none;
}

/* Riduzione del movimento: niente spostamenti né ingrandimenti, ma il riscontro resta.
   Le transizioni continuano solo su colore, fondo, bordo, ombra e opacità; trasformazioni
   e posizioni cambiano subito. Le animazioni continue decorative (punto «dal vivo»,
   pulsazioni) hanno la loro regola nel componente; gli indicatori di caricamento girano. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-property: color, background-color, border-color, outline-color, box-shadow, opacity !important;
    }
}