/* ═══════════════════════════════════════════════════════════════
   tokens.css  ·  UI 2026 — la fonte unica dei colori, dei font, delle misure

   Direzione C «Console» (SPECIFICA_UI_2026 §3): tema SCURO di default, grafite
   blu, UN accento — il verde IODAH rgb(0,121,89) — e i semantici solo per gli
   stati. Brand: Dune Rise (logotipo, titoli, occhielli), Inter per il testo,
   JetBrains Mono per numeri, id, webhook.

   REGOLA (CA-UI-1, `test/ui/token.js`): nessun colore letterale fuori da questo
   file. style.css, auth.css e componenti.css usano SOLO var(--…). Chi ha bisogno
   di un colore nuovo lo aggiunge qui, nei due temi, col perché.
   CONTRASTO (CA-UI-2): ogni coppia testo/fondo ≥ 4,5:1 nei due temi — il test
   lo misura sui valori di questo file.

   ALIAS: in fondo a ogni tema stanno i nomi che style.css/auth.css usavano
   prima (--bg-primary, --text-muted, --card, --muted…): puntano ai token nuovi,
   così nessuna regola esistente si rompe e la migrazione procede per superfici
   (tappe 2-4). Quando l'ultimo uso di un alias sparisce, si toglie l'alias.
   ═══════════════════════════════════════════════════════════════ */

/* ── Font e misure (uguali nei due temi) ─────────────────────── */
:root {
  --font-display: 'Dune Rise', 'Orbitron', 'Rajdhani', sans-serif;
  --font-text:    'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 16px; --fs-6: 20px; --fs-7: 26px;
  --lh-tight: 1.2; --lh-text: 1.5;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 64px;
  --r-1: 6px; --r-2: 8px; --r-3: 999px;
}
[data-font="orbitron"] { --font-display: 'Orbitron', 'Rajdhani', sans-serif; }

/* ── TEMA SCURO (default) ─────────────────────────────────────── */
:root, [data-theme="dark"] {
  color-scheme: dark;
  /* fondi, dal più profondo al più in rilievo */
  --paper:   #0A0E13;
  --paper-2: #0F141B;
  --paper-3: #141B23;
  --paper-4: #1A222C;
  --paper-5: #212A36;
  /* testo: primario, secondario, attenuato, quasi invisibile (solo decorazione) */
  --ink:   #E8ECF1;
  --ink-2: #A3AEBC;
  --ink-3: #7B889A;
  --ink-4: #4A5566;
  --on-brand: #FFFFFF;
  /* bordi e rilievi */
  --line:   rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.045);
  --line-3: rgba(255, 255, 255, 0.12);
  --hl:     rgba(255, 255, 255, 0.035);
  /* il brand: l'accento pieno, la variante leggibile sul fondo scuro, quella chiara, quella profonda */
  --brand:      #007959;
  --brand-2:    #19B48A;
  --brand-3:    #5FD3B0;
  --brand-deep: #005C43;
  --brand-soft: rgba(0, 121, 89, 0.16);
  --brand-glow: rgba(25, 180, 138, 0.28);
  /* semantici: solo per gli stati */
  --ok:     #19B48A; --ok-soft:     rgba(25, 180, 138, 0.13); --ok-line:     rgba(25, 180, 138, 0.35);
  --warn:   #F2A93B; --warn-soft:   rgba(242, 169, 59, 0.14); --warn-line:   rgba(242, 169, 59, 0.35);
  --danger: #F26D85; --danger-soft: rgba(242, 109, 133, 0.14); --danger-line: rgba(242, 109, 133, 0.35);
  /* Ponte verso Bootstrap 5.3: i suoi predefiniti sono tarati su un body chiaro e
     su questo fondo uscivano sotto soglia — i link a #0D6EFD (4,1:1) e il <code>
     rosa a #D63384 (4,1:1), visti sul wizard nel giro delle cinque fasi del
     2026-09-05. Qui prendono i nostri colori, nei due temi. */
  --bs-link-color-rgb: 106, 166, 255;
  --bs-link-hover-color-rgb: 154, 197, 255;
  --bs-code-color: var(--brand-2);
  --info:   #6AA6FF; --info-soft:   rgba(106, 166, 255, 0.13);
  /* i tre tipi di campo della Scheda (voce D): input · derivato · esito */
  --field-input:        var(--ink-3);
  --field-derived:      #B49CFF; --field-derived-soft: rgba(180, 156, 255, 0.13);
  --field-outcome:      var(--ok); --field-outcome-soft: var(--ok-soft);
  /* palette dei grafici e delle card KPI (sei serie, in ordine) */
  --chart-1: var(--brand-2); --chart-1-soft: var(--brand-soft);
  --chart-2: #6AA6FF;        --chart-2-soft: rgba(106, 166, 255, 0.13);
  --chart-3: #F2A93B;        --chart-3-soft: rgba(242, 169, 59, 0.13);
  --chart-4: #B49CFF;        --chart-4-soft: rgba(180, 156, 255, 0.13);
  --chart-5: #FB7185;        --chart-5-soft: rgba(251, 113, 133, 0.13);
  --chart-6: #2DD4BF;        --chart-6-soft: rgba(45, 212, 191, 0.13);
  --whatsapp: #25D366;       --whatsapp-soft: rgba(37, 211, 102, 0.14);
  /* ombre: quasi nessuna (i bordi fanno il lavoro), tranne i modali */
  --sh-1: inset 0 1px 0 var(--hl);
  --sh-2: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line-3);
  --veil-bg: rgba(0, 0, 0, 0.6);
  --focus: 0 0 0 3px var(--brand-soft), 0 0 0 1px var(--brand-2);
  --logo-img: url('../img/IODAH_logo_white.png');

  /* ── alias di style.css (dashboard, admin, RAG Builder) ── */
  --bg-primary:     var(--paper);
  --bg-secondary:   var(--paper-2);
  --bg-card:        var(--paper-2);
  --bg-card-hover:  var(--paper-3);
  --bg-input:       var(--paper);
  --border:         var(--line);
  --border-accent:  var(--brand-soft);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --accent:         var(--brand);
  --accent-light:   var(--brand-2);
  --accent-dim:     var(--brand-deep);
  --accent-glow:    var(--brand-soft);
  --warning:        var(--warn);
  --success:        var(--ok);
  --chart-grid:     var(--line-2);
  --shadow:         var(--sh-1);
  --shadow-lg:      var(--sh-2);
  --glass:          var(--hl);
  --scrollbar-thumb: var(--paper-5);
  --badge-bg:       var(--brand-soft);
  --badge-text:     var(--brand-2);
  --danger-bg:      var(--danger-soft);
  --danger-border:  var(--danger-line);
  --danger-text:    var(--danger);
  --card:           var(--paper-2);
  --card-2:         var(--paper);
  /* ── alias di auth.css (login, recupero, nuova password) ── */
  --bg:          var(--paper);
  --bg-glow:     var(--paper-3);
  --text:        var(--ink);
  --muted:       var(--ink-3);
  --input-bg:    var(--paper);
  --veil:        var(--hl);
  --shadow-card: var(--sh-2);
  --ok-bg:       var(--ok-soft);
  --ok-border:   var(--ok-line);
  --ok-text:     var(--ok);
  --err-bg:      var(--danger-soft);
  --err-border:  var(--danger-line);
  --err-text:    var(--danger);
}

/* ── TEMA CHIARO ──────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --paper:   #F4F6F8;
  --paper-2: #FFFFFF;
  --paper-3: #F7F9FB;
  --paper-4: #EEF1F5;
  --paper-5: #E4E9EF;
  --ink:   #0C1320;
  --ink-2: #4A5566;
  --ink-3: #5F6B7A;
  --ink-4: #9AA3AF;
  --on-brand: #FFFFFF;
  --line:   rgba(12, 19, 32, 0.09);
  --line-2: rgba(12, 19, 32, 0.055);
  --line-3: rgba(12, 19, 32, 0.16);
  --hl:     rgba(12, 19, 32, 0.03);
  --brand:      #007959;
  --brand-2:    #007959;
  --brand-3:    #005C43;
  --brand-deep: #005C43;
  --brand-soft: rgba(0, 121, 89, 0.10);
  --brand-glow: rgba(0, 121, 89, 0.22);
  --ok:     #0B7F5B; --ok-soft:     rgba(0, 121, 89, 0.10);   --ok-line:     rgba(0, 121, 89, 0.30);
  --warn:   #B45309; --warn-soft:   rgba(180, 83, 9, 0.11);   --warn-line:   rgba(180, 83, 9, 0.30);
  --danger: #B91C1C; --danger-soft: rgba(185, 28, 28, 0.09);  --danger-line: rgba(185, 28, 28, 0.28);
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color-rgb: 23, 62, 173;
  --bs-code-color: var(--brand-2);
  --info:   #1D4ED8; --info-soft:   rgba(29, 78, 216, 0.09);
  --field-input:        var(--ink-3);
  --field-derived:      #6D28D9; --field-derived-soft: rgba(109, 40, 217, 0.09);
  --field-outcome:      var(--ok); --field-outcome-soft: var(--ok-soft);
  --chart-1: #007959; --chart-1-soft: rgba(0, 121, 89, 0.10);
  --chart-2: #1D4ED8; --chart-2-soft: rgba(29, 78, 216, 0.09);
  --chart-3: #B45309; --chart-3-soft: rgba(180, 83, 9, 0.11);
  --chart-4: #6D28D9; --chart-4-soft: rgba(109, 40, 217, 0.09);
  --chart-5: #BE123C; --chart-5-soft: rgba(190, 18, 60, 0.09);
  --chart-6: #0F766E; --chart-6-soft: rgba(15, 118, 110, 0.10);
  --whatsapp: #128C4A; --whatsapp-soft: rgba(37, 211, 102, 0.14);
  --sh-1: none;
  --sh-2: 0 24px 64px rgba(12, 19, 32, 0.14), 0 0 0 1px var(--line);
  --veil-bg: rgba(12, 19, 32, 0.45);
  --focus: 0 0 0 3px var(--brand-soft), 0 0 0 1px var(--brand-2);
  --logo-img: url('../img/IODAH_logo_green.png');

  --bg-primary:     var(--paper);
  --bg-secondary:   var(--paper-2);
  --bg-card:        var(--paper-2);
  --bg-card-hover:  var(--paper-3);
  --bg-input:       var(--paper-4);
  --border:         var(--line);
  --border-accent:  var(--brand-soft);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --accent:         var(--brand);
  --accent-light:   var(--brand-2);
  --accent-dim:     var(--brand-deep);
  --accent-glow:    var(--brand-soft);
  --warning:        var(--warn);
  --success:        var(--ok);
  --chart-grid:     var(--line-2);
  --shadow:         var(--sh-1);
  --shadow-lg:      var(--sh-2);
  --glass:          var(--hl);
  --scrollbar-thumb: var(--paper-5);
  --badge-bg:       var(--brand-soft);
  --badge-text:     var(--brand-deep);
  --danger-bg:      var(--danger-soft);
  --danger-border:  var(--danger-line);
  --danger-text:    var(--danger);
  --card:           var(--paper-2);
  --card-2:         var(--paper-4);
  --bg:          var(--paper);
  --bg-glow:     var(--brand-soft);
  --text:        var(--ink);
  --muted:       var(--ink-3);
  --input-bg:    var(--paper-4);
  --veil:        var(--hl);
  --shadow-card: var(--sh-2);
  --ok-bg:       var(--ok-soft);
  --ok-border:   var(--ok-line);
  --ok-text:     var(--ok);
  --err-bg:      var(--danger-soft);
  --err-border:  var(--danger-line);
  --err-text:    var(--danger);
}