/* ═══════════════════════════════════════════════════════════════════════════
   BRAND — QUESTO FILE SI MODIFICA
   ═══════════════════════════════════════════════════════════════════════════

   È l'unico posto dove si cambiano i colori del progetto. Tutto il resto —
   pulsanti, badge, bordi, sfondi tenui, grafici, stati — si deriva da qui.

   Al momento contiene una palette NEUTRA, di proposito riconoscibile come
   "default": va sostituita con i colori del cliente.

   ┌─ ATTENZIONE ────────────────────────────────────────────────────────────┐
   │ Ogni colore ha due righe: il valore esadecimale e la sua terna RGB.      │
   │ DEVONO corrispondere. Bootstrap usa la terna per le trasparenze         │
   │ (`rgba(var(--bs-primary-rgb), .5)`) e non è derivabile dall'esadecimale  │
   │ in CSS. Se le due righe divergono, le trasparenze mostrano un colore     │
   │ diverso dal pieno — e ci si mette un pomeriggio a capire perché.         │
   └─────────────────────────────────────────────────────────────────────────┘

   Il tema scuro non è lo stesso colore su fondo nero: un colore saturo che
   funziona sul bianco, sul nero risulta cupo e poco leggibile. Per questo
   ogni tinta ha una variante dedicata, di norma più chiara e meno satura.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Colore principale ─────────────────────────────────────────────────
       Quello di azioni, stati attivi, evidenziazioni. Usato ovunque:
       cambiarlo cambia il carattere dell'intero prodotto. */
    /* Lo stesso azzurro che il device usa per le azioni sul pannello AMOLED
       (0x00A0FF in ui/): la pagina e lo schermo del device sono due facce
       dello stesso prodotto, e chi passa dall'uno all'altro deve riconoscerlo.
       Sul bianco e' scurito quanto basta per il contrasto del testo. */
    --ui-brand: #0077C8;
    --ui-brand-rgb: 0, 119, 200;

    /* Testo che sta SOPRA il colore principale (pulsanti pieni, badge).
       Verifica il contrasto se scegli una tinta chiara: con un giallo
       serve testo scuro, non bianco. */
    --ui-brand-contrast: #ffffff;

    /* ── Colore secondario ─────────────────────────────────────────────────
       Azioni di supporto e accenti. Deve distinguersi dal principale
       anche per chi non percepisce bene i colori: cambia la luminosità,
       non solo la tinta. */
    --ui-accent: #0F4C75;
    --ui-accent-rgb: 15, 76, 117;
    --ui-accent-contrast: #ffffff;

    /* ── Colori di stato ───────────────────────────────────────────────────
       Cambiali solo se il cliente ha convenzioni proprie. Verde/giallo/rosso
       sono aspettative consolidate: ribaltarle confonde. */
    --ui-success: #12B981;
    --ui-success-rgb: 18, 185, 129;
    --ui-warning: #F59E0B;
    --ui-warning-rgb: 245, 158, 11;
    --ui-danger: #E14434;
    --ui-danger-rgb: 225, 68, 52;

    /* ── Superfici ─────────────────────────────────────────────────────────
       `page` è lo sfondo dell'applicazione, `panel` quello di card e
       pannelli. NON devono coincidere: la differenza fra i due è ciò che
       dà profondità al layout senza bisogno di bordi marcati. */
    --ui-page: #EDECF3;
    --ui-panel: #FFFFFF;

    /* ── Testo ─────────────────────────────────────────────────────────────
       `muted` per etichette e testi secondari. Sotto il 4.5:1 di contrasto
       non scendere: è il minimo per essere leggibile da tutti. */
    --ui-ink: #16121F;
    --ui-ink-muted: #6B7280;
}

[data-bs-theme="dark"] {
    /* Sul fondo scuro si torna all'azzurro pieno del device. */
    --ui-brand: #00A0FF;
    --ui-brand-rgb: 0, 160, 255;
    --ui-brand-contrast: #12101B;

    --ui-accent: #3D8FC7;
    --ui-accent-rgb: 61, 143, 199;
    --ui-accent-contrast: #0A1520;

    --ui-success: #34D399;
    --ui-success-rgb: 52, 211, 153;
    --ui-warning: #FBBF24;
    --ui-warning-rgb: 251, 191, 36;
    --ui-danger: #F87171;
    --ui-danger-rgb: 248, 113, 113;

    --ui-page: #0E0D12;
    --ui-panel: #1A1822;

    --ui-ink: #ECE8F5;
    --ui-ink-muted: #9AA3B2;
}