/* =============================================================================
   DESIGN TOKENS — CONTRATTO SEMANTICO GLOBALE
   -----------------------------------------------------------------------------
   Questo file definisce SOLO token semantici (per ruolo, non per colore).
   Non esistono token come --red-500 o --991A1E: il colore concreto vive nei
   moduli di tema (theme-dark / theme-light) e di palette (accent-*).

   ORDINE DI CARICAMENTO (vedi _Header.cshtml):
     1. design-tokens.css   <-- QUESTO FILE: nomi + default (baseline dark) + primitive
     2. theme-dark.css      <-- neutrali + stati per [data-theme="dark"]
     3. theme-light.css     <-- neutrali + stati per [data-theme="light"]
     4. accent-red.css      <-- famiglia primary per [data-accent="red"]
     5. accent-purple.css   <-- famiglia primary per [data-accent="purple"]
     6. light.css / style.css  (LEGACY, ancora hardcoded — migrati in FASE 4)

   NOTA DI ATTIVAZIONE: finche' style.css mantiene il proprio blocco :root e
   light.css il blocco body.light (caricati DOPO), gli alias legacy in fondo a
   questo file restano inerti e l'aspetto attuale non cambia. La migrazione
   FASE 4 (sostituzione colori hardcoded -> var()) attiva pienamente il sistema.
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
       PRIMITIVE NON-COLORE (mode/palette indipendenti)
       --------------------------------------------------------------------- */
    --radius-sm: 6px;
    --radius: 9px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --transition: 0.40s cubic-bezier(.65, .2, .3, 1.15);
    --transition-fast: 0.25s cubic-bezier(.55, .14, .42, 1.35);

    /* Colori "assoluti" usati come riferimento, non come stile diretto */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Testo/icone sopra qualsiasi colore di accent o stato pieno */
    --text-on-accent: #ffffff;

    /* ---------------------------------------------------------------------
       DEFAULT SEMANTICI (baseline = DARK).
       Garantiscono che nessun token sia mai indefinito anche prima che i
       moduli di tema/palette vengano applicati. Vengono sovrascritti da
       theme-*.css ([data-theme]) e accent-*.css ([data-accent]).
       --------------------------------------------------------------------- */

    /* Brand / Primary (sovrascritto dai file accent-*) */
    --color-primary: #991A1E;
    --color-primary-hover: #b02a37;
    --color-primary-active: #7f1218;
    --color-primary-soft: rgba(153, 26, 30, 0.12);
    --color-primary-softer: rgba(153, 26, 30, 0.06);
    --color-primary-border: rgba(153, 26, 30, 0.35);
    --color-primary-contrast: #ffffff;
    --color-primary-glow: rgba(153, 26, 30, 0.45);

    /* Secondary (accento di supporto: famiglia teal/acqua, indipendente da palette) */
    --color-secondary: #2ea3bc;
    --color-secondary-hover: #3db0c3;
    --color-secondary-soft: rgba(0, 173, 181, 0.18);
    --color-secondary-border: rgba(0, 173, 181, 0.40);
    --color-secondary-contrast: #ffffff;

    /* Stati (sovrascritti per-modalita' da theme-*.css) */
    --color-success: #2ca96f;
    --color-success-hover: #35b779;
    --color-success-soft: rgba(25, 135, 84, 0.18);
    --color-success-border: rgba(25, 135, 84, 0.45);
    --color-success-contrast: #ffffff;

    --color-warning: #d2a33a;
    --color-warning-hover: #e0b33a;
    --color-warning-soft: rgba(194, 143, 0, 0.20);
    --color-warning-border: rgba(194, 143, 0, 0.45);
    --color-warning-contrast: #1a1012;

    --color-danger: #e84a5f;
    --color-danger-hover: #ff4a57;
    --color-danger-soft: rgba(232, 74, 95, 0.18);
    --color-danger-border: rgba(232, 74, 95, 0.45);
    --color-danger-contrast: #ffffff;

    --color-info: #3a8ca9;
    --color-info-hover: #4aa0bd;
    --color-info-soft: rgba(46, 95, 138, 0.18);
    --color-info-border: rgba(46, 95, 138, 0.45);
    --color-info-contrast: #ffffff;

    /* Sfondi (baseline dark) */
    --bg-page: #101215;
    --bg-surface: #17191c;
    --bg-card: #1C1E20;
    --bg-elevated: #20252b;
    --bg-inset: #121417;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(255, 255, 255, 0.10);
    --bg-scrim: rgba(0, 0, 0, 0.50);

    /* Bordi (baseline dark) */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* Testo (baseline dark) */
    --text-primary: #e2e2e2;
    --text-secondary: #bfc1c9;
    --text-muted: #8b949e;
    --text-title: #e6edf3;
    --text-link: var(--color-primary);

    /* Ombre / focus (baseline dark) */
    --shadow-sm: 0 1.5px 8px rgba(21, 24, 27, 0.80);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.66), 0 1.5px 8px rgba(21, 24, 27, 0.80);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.72);
    --focus-ring: 0 0 0 3px var(--color-primary-glow);

    /* =====================================================================
       ALIAS LEGACY  ->  TOKEN SEMANTICI
       Mantengono compatibili gli stili NON ancora migrati (style.css /
       light.css). Diventano effettivi quando in FASE 4 verranno rimossi i
       blocchi :root di style.css e body.light di light.css.
       ===================================================================== */
    --bg: var(--bg-page);
    --bg-alt: var(--bg-surface);
    --active-color: var(--bg-inset);
    --accent-main: var(--color-primary);
    --accent-glow: var(--color-primary-glow);
    --accent-green: var(--color-success);
    --accent-green-glow: var(--color-success-border);
    --accent-red: var(--color-danger);
    --text: var(--text-primary);
    --text-light: var(--text-secondary);
    --text-title-small: var(--text-muted);
}