/* ============================================================
   AIMON TOKENS — single source of truth
   File: static/css/aimon-tokens.css
   Va caricato PER PRIMO, prima di aimon-common.css e di ogni
   altro CSS di pagina.

   Architettura a 3 layer:
     1. PRIMITIVE   — valori grezzi (colori/misure). Non cambiano
                      mai tra i temi. Estratti dal codice esistente.
     2. SEMANTICHE  — a cosa serve un colore (superficie, testo,
                      bordo...). Questi CAMBIANO tra light e dark.
     3. DIMENSIONI  — larghezze, altezze, raggi, z-index, motion.

   NOTA SUI BREAKPOINT: in CSS puro le custom properties NON
   funzionano dentro le @media. I 3 breakpoint standard del
   progetto sono documentati in fondo e vanno scritti a mano
   in ogni media query. Usare SOLO questi tre valori.
   ============================================================ */


/* ============================================================
   LAYER 1 — PRIMITIVE (valori grezzi, invarianti tra i temi)
   ============================================================ */
:root {

    /* ---- Viola del brand (3 tinte + 1 alone) ------------------
       Derivati dal censimento: #735de1 (64x), #534ab7 (32x, base
       degli rgba 83,74,183), #3c3489 (15x), #8b7ee3 (aloni sfondo). */
    --violet-500: #735de1;   /* primary / brand chiaro           */
    --violet-600: #5b47c9;   /* hover primary                    */
    --violet-700: #534ab7;   /* medio: bordi, ombre (83,74,183)  */
    --violet-900: #3c3489;   /* scuro: testi titolo              */
    --violet-300: #8b7ee3;   /* light: aloni, accenti su scuro   */

    /* Canali RGB del viola-700, per comporre rgba() via var() */
    --violet-700-rgb: 83, 74, 183;
    --violet-300-rgb: 139, 126, 227;
    --violet-500-rgb: 115, 93, 225;

    /* ---- Grigi neutri (dal censimento) ------------------------ */
    --gray-900: #1e293b;   /* testo forte (--aimon-dark)          */
    --gray-700: #374151;
    --gray-600: #5f5e5a;
    --gray-500: #64748b;   /* testo secondario (--aimon-secondary)*/
    --gray-400: #94a3b8;   /* testo muted                         */
    --gray-350: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e2e8f0;   /* bordo (--aimon-border)              */
    --gray-100: #f1f5f9;
    --gray-50:  #f8fafc;   /* superficie chiara (--aimon-light)   */
    --white:    #ffffff;

    /* ---- Colori funzionali ------------------------------------ */
    --green-500: #10b981;  /* success                             */
    --green-400: #4ade80;
    --red-500:   #ef4444;  /* danger                              */
    --red-600:   #dc2626;
    --amber-500: #f59e0b;  /* warning                             */

    /* ---- AImon Rate · 6 fasce (dal blocco PALETTE-V1) ---------- */
    --rate-stress:          #B0191E;  --rate-stress-dark:     #4F0B0D;
    --rate-stress-bg-top:   #F3DCDD;  --rate-stress-bg-bot:   #FCF6F6;
    --rate-risk-off:        #CD191A;  --rate-risk-off-dark:   #5C0B0C;
    --rate-risk-off-bg-top: #F8DCDD;  --rate-risk-off-bg-bot: #FDF6F6;
    --rate-cautela:         #E07B1F;  --rate-cautela-dark:    #6B340A;
    --rate-cautela-bg-top:  #FAD9BB;  --rate-cautela-bg-bot:  #FDEDDB;
    --rate-neutrale:        #EAAF23;  --rate-neutrale-dark:   #694F10;
    --rate-neutrale-bg-top: #FBEBB6;  --rate-neutrale-bg-bot: #FDF4D8;
    --rate-risk-on:         #157F3D;  --rate-risk-on-dark:    #09391B;
    --rate-risk-on-bg-top:  #DCECE2;  --rate-risk-on-bg-bot:  #F6FAF7;
    --rate-espansione:      #4ADE80;  --rate-espansione-dark: #21643A;
    --rate-espansione-bg-top:#E4FAEC; --rate-espansione-bg-bot:#F8FEFA;
}


/* ============================================================
   LAYER 2 — SEMANTICHE · TEMA LIGHT (default)
   Queste variabili descrivono un RUOLO, non un colore fisso.
   Il resto del CSS dovrà puntare a queste (non alle primitive
   né a valori hardcoded) perché il dark mode funzioni.
   ============================================================ */
:root {

    /* Retro-compatibilità: i vecchi nomi restano validi e ora
       puntano alle primitive. Nessun file esistente si rompe. */
    --aimon-primary:   var(--violet-500);
    --aimon-secondary: var(--gray-500);
    --aimon-success:   var(--green-500);
    --aimon-danger:    var(--red-500);
    --aimon-warning:   var(--amber-500);
    --aimon-dark:      var(--gray-900);
    --aimon-light:     var(--gray-50);
    --aimon-border:    var(--gray-200);

    /* I tre nomi USATI ma prima MAI definiti — ora risolti. */
    --aimon-violet:    var(--violet-500);
    --violet-strong:   var(--violet-700);
    --violet-deepest:  var(--violet-900);

    /* ---- Superfici -------------------------------------------- */
    --surface:         var(--white);   /* card, pannelli opachi    */
    --surface-raised:  var(--gray-50);  /* header interni, hover    */
    --surface-sunken:  var(--gray-100); /* pill, chip, input        */

    /* Vetro (glassmorphism): superficie semi-trasparente          */
    --glass-strong:    rgba(255, 255, 255, 0.65);
    --glass-medium:    rgba(255, 255, 255, 0.55);
    --glass-soft:      rgba(255, 255, 255, 0.40);
    --glass-softer:    rgba(255, 255, 255, 0.35);

    /* ---- Testo ------------------------------------------------- */
    --text-primary:    var(--gray-900);
    --text-secondary:  var(--gray-500);
    --text-muted:      var(--gray-400);
    --text-on-accent:  var(--white);

    /* ---- Bordi ------------------------------------------------- */
    --border:          var(--gray-200);
    --border-violet:   rgba(var(--violet-700-rgb), 0.15);
    --border-violet-strong: rgba(var(--violet-700-rgb), 0.25);

    /* ---- Accento (link, focus, elementi attivi) --------------- */
    --accent:          var(--violet-500);
    --accent-hover:    var(--violet-600);
    --accent-ring:     rgba(var(--violet-500-rgb), 0.15); /* focus  */

    /* ---- Ombre ------------------------------------------------- */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(var(--violet-700-rgb), 0.08);
    --shadow-lg:  0 12px 32px rgba(0,0,0,0.12);

    /* ---- Sfondo pagina (il gradiente viola->verde) ------------ */
    --page-bg-color: #FCFBFE;
    --page-bg-gradient: linear-gradient(180deg,
        rgba(139, 126, 227, 0.22) 0%,
        rgba(83, 74, 183, 0.30) 30%,
        rgba(139, 126, 227, 0.28) 60%,
        rgba(74, 222, 128, 0.18) 100%);
}


/* ============================================================
   LAYER 2 — SEMANTICHE · TEMA DARK
   Attivato da  <html data-theme="dark">.
   ATTENZIONE: questi valori sono una PROPOSTA iniziale derivata
   dalla palette light — il dark mode non esiste nel codice
   attuale, quindi vanno rifiniti guardandoli a schermo.
   Le primitive del brand NON cambiano; cambiano solo i ruoli.
   ============================================================ */
[data-theme="dark"] {

    --surface:         #1e1b2e;
    --surface-raised:  #26233a;
    --surface-sunken:  #171528;

    --glass-strong:    rgba(30, 27, 46, 0.70);
    --glass-medium:    rgba(30, 27, 46, 0.60);
    --glass-soft:      rgba(30, 27, 46, 0.45);
    --glass-softer:    rgba(30, 27, 46, 0.35);

    --text-primary:    #e7e5f0;
    --text-secondary:  #a9a7b8;
    --text-muted:      #6b6a7a;

    --border:          rgba(255, 255, 255, 0.10);
    --border-violet:   rgba(var(--violet-300-rgb), 0.18);
    --border-violet-strong: rgba(var(--violet-300-rgb), 0.28);

    /* Su fondo scuro il primary si schiarisce per leggibilità */
    --accent:          var(--violet-300);
    --accent-hover:    var(--violet-500);
    --accent-ring:     rgba(var(--violet-300-rgb), 0.25);

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg:  0 12px 32px rgba(0,0,0,0.55);

    --page-bg-color: #14121f;
    --page-bg-gradient: linear-gradient(180deg,
        rgba(83, 74, 183, 0.28) 0%,
        rgba(60, 52, 137, 0.22) 40%,
        rgba(30, 27, 46, 0.90) 100%);
}


/* ============================================================
   LAYER 3 — DIMENSIONI, RAGGI, Z-INDEX, MOTION
   ============================================================ */
:root {

    /* ---- Layout ----------------------------------------------- */
    /* NOTA: la variabile storica valeva 190px ma un override la
       forzava a 165px !important. Qui uso il valore EFFETTIVO. */
    --sidebar-width:        165px;
    --right-sidebar-width:  260px;
    --header-height:        80px;

    /* ---- Raggi ------------------------------------------------- */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;

    /* ---- Z-index (scala coerente) ----------------------------- */
    --z-sidebar:  100;
    --z-header:   200;
    --z-drawer:   900;   /* sidebar mobile off-canvas             */
    --z-overlay:  899;   /* velo dietro il drawer                 */
    --z-dropdown: 9999;  /* ricerca globale                       */

    /* ---- Motion ------------------------------------------------ */
    --ease-out:   cubic-bezier(.16, 1, .3, 1);
    --dur-fast:   .15s;
    --dur-base:   .25s;
    --dur-slow:   .5s;
}


/* ============================================================
   BREAKPOINT STANDARD (documentazione — NON sono variabili)
   Usare SOLO questi tre valori in tutte le @media del progetto.

     --  ≤ 1200px  : nascondi sidebar destra
     --  ≤ 992px   : sidebar sinistra -> drawer; contenuto full-width
     --  ≤ 576px   : adattamenti fini (tipografia, tabelle, grafici)

   Esempio:
     @media (max-width: 992px) { ... }
   ============================================================ */