/* ClubNex — Design token V1 · aggiornato 30/10/2026.
   Approvati: blu B2 #1D3B56, lime #8BEA45, Plus Jakarta Sans + Inter, raggi Bilanciati, ombre Lievi,
   densità Standard, tema società a due livelli, logo C · Avanti e scritta ClubNex.
   Proposta: valori di esempio del tema società (calcolati per ogni club, qui Union Valleolona con colori stimati). */
:root {
  /* primitivi */
  --cnx-blue-50: #F1F6FA;
  --cnx-blue-100: #E5EEF6;
  --cnx-blue-700: #254B6D;
  --cnx-blue-800: #1D3B56;
  --cnx-blue-900: #183047;
  --cnx-lime-300: #9CF05A;
  --cnx-lime-400: #8BEA45;
  --cnx-neutral-0: #FFFFFF;
  --cnx-neutral-50: #F5F7F8;
  --cnx-neutral-100: #EEF1F4;
  --cnx-neutral-200: #E4E9EE;
  --cnx-neutral-300: #CBD4DC;
  --cnx-neutral-400: #8A97A4;
  --cnx-neutral-500: #7F8E9D;
  --cnx-neutral-600: #56677A;
  --cnx-neutral-700: #47576A;
  --cnx-neutral-900: #172331;
  --cnx-green-50: #E6F4E1;
  --cnx-green-700: #2F7A18;
  --cnx-amber-50: #FFF1DB;
  --cnx-amber-800: #8A4B00;
  --cnx-red-50: #FDECEA;
  --cnx-red-700: #B42318;
  /* semantici */
  --cnx-bg-canvas: var(--cnx-neutral-50); /* Sfondo operativo delle pagine */
  --cnx-bg-surface: var(--cnx-neutral-0); /* Card, tabelle, header */
  --cnx-bg-subtle: var(--cnx-neutral-100); /* Campi di ricerca, tab inattive, righe alternate */
  --cnx-bg-brand: var(--cnx-blue-800); /* Sidebar, card premium, tab bar mobile */
  --cnx-bg-brand-elevated: var(--cnx-blue-700); /* Voce di menu attiva, pannelli dentro superfici blu */
  --cnx-bg-brand-deep: var(--cnx-blue-900); /* Fasce premium e aree marketing più profonde */
  --cnx-bg-accent: var(--cnx-lime-400); /* CTA lime e indicatori di brand (uso raro) */
  --cnx-bg-info: var(--cnx-blue-100); /* Sfondo badge informativi */
  --cnx-text-primary: var(--cnx-neutral-900); /* Testo principale */
  --cnx-text-secondary: var(--cnx-neutral-600); /* Testo secondario e didascalie */
  --cnx-text-on-brand: var(--cnx-neutral-0); /* Testo su superfici blu */
  --cnx-text-on-accent: var(--cnx-blue-800); /* Testo su lime (mai bianco) */
  --cnx-text-accent-on-brand: var(--cnx-lime-400); /* Eyebrow e icone attive su blu */
  --cnx-text-link: var(--cnx-blue-800); /* Link su superfici chiare */
  --cnx-border-default: var(--cnx-neutral-200); /* Bordi di card e separatori */
  --cnx-border-strong: var(--cnx-neutral-300); /* Bordi di pulsanti secondari e separatori marcati */
  --cnx-border-input: var(--cnx-neutral-500); /* Bordo di input, select e checkbox (≥3:1, WCAG 1.4.11) */
  --cnx-focus-ring: var(--cnx-blue-800); /* Anello di focus su superfici chiare (2px, offset 2px) */
  --cnx-focus-ring-on-brand: var(--cnx-lime-400); /* Anello di focus su superfici blu */
  --cnx-action-primary-bg: var(--cnx-blue-800); /* Pulsante primario */
  --cnx-action-primary-bg-hover: var(--cnx-blue-700); /* Pulsante primario hover */
  --cnx-action-primary-text: var(--cnx-neutral-0); /* Testo pulsante primario */
  --cnx-action-accent-bg: var(--cnx-lime-400); /* Pulsante lime */
  --cnx-action-accent-bg-hover: var(--cnx-lime-300); /* Pulsante lime hover */
  --cnx-action-accent-text: var(--cnx-blue-800); /* Testo pulsante lime */
  --cnx-action-secondary-bg: var(--cnx-neutral-0); /* Pulsante secondario */
  --cnx-action-secondary-bg-hover: var(--cnx-neutral-50); /* Pulsante secondario hover */
  --cnx-action-secondary-border: var(--cnx-neutral-300); /* Bordo pulsante secondario */
  --cnx-action-disabled-bg: var(--cnx-neutral-200); /* Controlli disabilitati */
  --cnx-action-disabled-text: var(--cnx-neutral-400); /* Testo disabilitato (esente WCAG 1.4.3) */
  --cnx-status-success-bg: var(--cnx-green-50); /* Badge successo */
  --cnx-status-success-text: var(--cnx-green-700); /* Testo successo */
  --cnx-status-warning-bg: var(--cnx-amber-50); /* Badge attenzione */
  --cnx-status-warning-text: var(--cnx-amber-800); /* Testo attenzione */
  --cnx-status-danger-bg: var(--cnx-red-50); /* Badge errore */
  --cnx-status-danger-text: var(--cnx-red-700); /* Testo errore */
  --cnx-status-info-bg: var(--cnx-blue-100); /* Badge informativo */
  --cnx-status-info-text: var(--cnx-blue-800); /* Testo informativo */
  --cnx-text-on-brand-muted: rgba(255,255,255,0.72); /* Voci di menu e testi secondari su blu */
  --cnx-text-on-brand-subtle: rgba(255,255,255,0.60); /* Etichette di gruppo su blu, solo ≥11px semibold */
  --cnx-border-on-brand: rgba(255,255,255,0.14); /* Separatori e tracce su blu */
  --cnx-bg-brand-hover: rgba(255,255,255,0.07); /* Hover delle voci su blu */
  --cnx-action-ghost-border: rgba(255,255,255,0.30); /* Bordo pulsante ghost su blu */
  --cnx-text-placeholder: #5F6E7D; /* Placeholder dei campi (5,23:1 su bianco) */
  --cnx-control-off: var(--cnx-neutral-500); /* Traccia interruttore spento */
  /* tipografia */
  --cnx-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cnx-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cnx-type-display-hero: 800 58px/1.04 var(--cnx-font-display); --cnx-type-display-hero-tracking: -0.03em; /* Testata pagine commerciali (desktop) */
  --cnx-type-display-hero-mobile: 800 36px/1.08 var(--cnx-font-display); --cnx-type-display-hero-mobile-tracking: -0.025em; /* Testata pagine commerciali (mobile) */
  --cnx-type-heading-1: 700 26px/1.2 var(--cnx-font-display); --cnx-type-heading-1-tracking: -0.015em; /* Titolo di pagina */
  --cnx-type-heading-1-mobile: 700 22px/1.2 var(--cnx-font-display); --cnx-type-heading-1-mobile-tracking: -0.015em; /* Titolo di pagina su mobile */
  --cnx-type-heading-section: 700 22px/1.25 var(--cnx-font-display); --cnx-type-heading-section-tracking: -0.01em; /* Titolo di sezione */
  --cnx-type-heading-card: 700 16px/1.3 var(--cnx-font-display); --cnx-type-heading-card-tracking: 0em; /* Titolo di card */
  --cnx-type-team-name: 700 20px/1.2 var(--cnx-font-display); --cnx-type-team-name-tracking: -0.01em; /* Nomi squadra nelle card partita */
  --cnx-type-kpi-value: 700 30px/1.1 var(--cnx-font-display); --cnx-type-kpi-value-tracking: -0.02em; /* Valori KPI */
  --cnx-type-stat-value: 700 36px/1.05 var(--cnx-font-display); --cnx-type-stat-value-tracking: -0.02em; /* Statistiche atleta e punteggi in evidenza */
  --cnx-type-score: 700 54px/1.0 var(--cnx-font-display); --cnx-type-score-tracking: -0.02em; /* Punteggio partita */
  --cnx-type-body: 400 14px/1.45 var(--cnx-font-body); --cnx-type-body-tracking: 0em; /* Testo dell’applicazione */
  --cnx-type-body-long: 400 15px/1.6 var(--cnx-font-body); --cnx-type-body-long-tracking: 0em; /* Testi lunghi, descrizioni */
  --cnx-type-body-strong: 600 14px/1.45 var(--cnx-font-body); --cnx-type-body-strong-tracking: 0em; /* Voci elenco, celle in evidenza */
  --cnx-type-caption: 500 12.5px/1.4 var(--cnx-font-body); --cnx-type-caption-tracking: 0em; /* Didascalie e righe secondarie */
  --cnx-type-label-caps: 600 11px/1.3 var(--cnx-font-body); --cnx-type-label-caps-tracking: 0.09em; /* Etichette maiuscole (gruppi menu, eyebrow); maiuscolo */
  --cnx-type-button: 600 14px/1.0 var(--cnx-font-body); --cnx-type-button-tracking: 0em; /* Pulsanti */
  --cnx-type-input: 400 16px/1.3 var(--cnx-font-body); --cnx-type-input-tracking: 0em; /* Campi modulo su mobile (16px evita lo zoom iOS) */
  --cnx-type-table: 400 13.5px/1.4 var(--cnx-font-body); --cnx-type-table-tracking: 0em; /* Tabelle, sempre con cifre tabellari */
  /* geometria: raggi Bilanciati · ombre Lievi · densità Standard */
  --cnx-radius-sm: 8px; /* Pulsanti piccoli, celle calendario, chip rettangolari */
  --cnx-radius-md: 10px; /* Pulsanti, input, menu, avvisi */
  --cnx-radius-lg: 16px; /* Card, card premium */
  --cnx-radius-xl: 20px; /* Dialog */
  --cnx-radius-pill: 999px; /* Badge, filtri a pillola, contatori */
  --cnx-shadow-card: 0 1px 2px rgba(23,35,49,0.06), 0 1px 1px rgba(23,35,49,0.04); /* Card a riposo (con bordo border.default) */
  --cnx-shadow-hover: 0 4px 12px rgba(23,35,49,0.10); /* Card cliccabili al passaggio */
  --cnx-shadow-pop: 0 10px 28px rgba(23,35,49,0.16), 0 2px 6px rgba(23,35,49,0.06); /* Menu, notifiche, pulsante flottante */
  --cnx-shadow-dialog: 0 24px 56px rgba(23,35,49,0.22); /* Dialog e pannelli modali */
  --cnx-size-control-sm: 36px; /* Pulsanti piccoli, filtri, paginazione */
  --cnx-size-control-md: 40px; /* Pulsanti e input standard (desktop) */
  --cnx-size-control-lg: 48px; /* Pulsanti grandi, CTA commerciali */
  --cnx-size-touch-min: 44px; /* Minimo per qualsiasi controllo su mobile */
  --cnx-space-1: 4px;
  --cnx-space-2: 8px;
  --cnx-space-3: 12px;
  --cnx-space-4: 16px;
  --cnx-space-5: 20px;
  --cnx-space-6: 24px;
  --cnx-space-8: 32px;
  --cnx-space-10: 40px;
  --cnx-space-12: 48px;
  --cnx-layout-card-padding: var(--cnx-space-5); /* Padding interno card */
  --cnx-layout-page-padding: var(--cnx-space-6); /* Margine pagina desktop (mobile: space.4) */
  --cnx-layout-grid-gap: var(--cnx-space-5); /* Distanza fra card */
  --cnx-layout-stack-gap: var(--cnx-space-3); /* Distanza fra elementi dentro una card */
  --cnx-layout-table-row-y: var(--cnx-space-3); /* Padding verticale righe tabella */
  --cnx-layout-button-x: var(--cnx-space-4); /* Padding orizzontale pulsanti */
  /* logo (approvato 30/10/2026) */
  --cnx-logo-club-on-dark: var(--cnx-neutral-0);   /* "Club" su fondi blu */
  --cnx-logo-nex-on-dark: var(--cnx-lime-400);     /* "Nex" su fondi blu */
  --cnx-logo-club-on-light: var(--cnx-blue-800);   /* "Club" su fondi chiari */
  --cnx-logo-nex-on-light: var(--cnx-green-700);   /* "Nex" su fondi chiari: mai lime su bianco */
  /* tema società: struttura approvata (due livelli); i valori si calcolano per ogni società (algoritmo nel README token).
     Esempio Union Valleolona, colori stimati. Sovrascrivere per club con: [data-club="slug"] { --cnx-club-primary: ...; } */
  --cnx-club-primary: #1B6B35;
  --cnx-club-on-primary: #FFFFFF;
  --cnx-club-secondary: #F5C518;
  --cnx-club-tint: #E8F0EB;
  --cnx-club-text: #1B6B35;
  --cnx-club-dark: #185F2F;
  --cnx-club-accent-on-dark: #F5C518;
}
.cnx-num { font-variant-numeric: tabular-nums; }