/* ============================================================
   OPENDESK24 — UI TOKENS v1 (design system unificato)
   Fonte di verità unica per palette/shadow/radius desktop.

   Riferimento visivo: opendesk24_design_system.html (root).
   Brief:            BRIEF_FOR_CODE.md (root).

   Scope: body:not(.mob-body) — il mobile (body.mob-body) NON
   eredita questi token, mantiene `--mob-*` indipendenti.

   Calendari intoccabili (scope esclusi dai selettori globali):
     .occupancy-calendar, .scadenze-calendar-card, .cal-light-scope,
     .calendar-grid, .gantt-table, .mob-gantt-table, .checkout-table,
     .cal-card  →  preservano i colori attuali in light mode.

   Strategia di migrazione: progressive enhancement.
   I token nuovi convivono con alias legacy (`--bg`, `--card`,
   `--p-*`, `--accent-blue`, ecc.) per non rompere i 50+ template
   Django esistenti. La pulizia di dark-theme.css / ui-premium.css
   è un task separato successivo.

   SECTIONS
     1. Sidebar tokens (always dark)
     2. Light mode :root surfaces + brand + semantic
     3. Dark mode [data-theme="dark"] overrides
     4. Bootstrap CSS variable overrides
     5. Legacy aliases (compatibility shim)
     6. Color-scheme declarations
   ============================================================ */


/* ============================================================
   SECTION 1 — Sidebar tokens (always dark, light + dark mode)
   ============================================================ */

body:not(.mob-body) {
  /* feat/design-tokens: sidebar fissa #16171A (fuori dai temi).
     Era Slate Navy #243A5E; ora il token --sidebar-bg definito in
     tokens.css. Tutti i nomi --sb-* sono ALIAS per back-compat con
     ui-premium.css / design-system-apply.css legacy. */
  --sb-bg:           var(--sidebar-bg);
  --sb-bg-top:       var(--sidebar-bg);
  --sb-bg-active:    var(--sidebar-hover);
  --sb-border:       var(--border);
  --sb-text:         var(--sidebar-item);
  --sb-text-muted:   var(--text-muted);
  --sb-text-active:  var(--sidebar-active);
  --sb-hover-bg:     var(--sidebar-hover);
  --sb-active-bg:    var(--sidebar-hover);
  --sb-section-text: var(--text-muted);
  --sb-accent:       var(--sidebar-active-accent);
}


/* ============================================================
   SECTION 2 — Light mode :root  (default)
   ============================================================ */

body:not(.mob-body) {
  /* ── Surfaces ── */
  /* feat/design-tokens light surfaces (era #EEF0F5 / #F4F6FB / #FFF;
     ora coerenti col design system: --bg / --surface-2 / --surface). */
  --surface-0: #FAFAFA;   /* = var(--bg) light */
  --surface-2: #F9FAFB;   /* = var(--surface-2) light */
  --surface-3: #FFFFFF;   /* = var(--surface) light */
  --surface-4: #E8ECF3;   /* hover */
  --surface-5: #DFE4EE;   /* pressed */

  /* ── Borders ── */
  --border-subtle:  rgba(28,38,67,0.06);
  --border-default: rgba(28,38,67,0.10);
  --border-strong:  rgba(28,38,67,0.18);

  /* ── Text ── */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-tertiary:  #94A3B8;

  /* ── Brand (Teal / petrolio) ── */
  --brand:         #0E7490;
  --brand-hover:   #155E75;
  --brand-soft:    rgba(14,116,144,0.08);
  --brand-strong:  rgba(14,116,144,0.22);
  --brand-text:    #155E75;

  /* ── Accent (Purple — solo Preventivi sidebar) ── */
  --accent-purple: #A855F7;
  --accent-soft:   rgba(168,85,247,0.08);

  /* ── Semantic colors (light) ── */
  --success:        #059669;
  --success-soft:   #ECFDF5;
  --success-border: #A7F3D0;
  --success-text:   #047857;

  --warning:        #D97706;
  --warning-soft:   #FFFBEB;
  --warning-border: #FDE68A;
  --warning-text:   #B45309;

  --danger:         #DC2626;
  --danger-soft:    #FEF2F2;
  --danger-border:  #FECACA;
  --danger-text:    #B91C1C;

  --info:           #2563EB;
  --info-soft:      #EFF6FF;
  --info-border:    #BFDBFE;
  --info-text:      #1D4ED8;

  /* ── Per-section icon accents (light) ── */
  --ic-dashboard:    #0E7490;
  --ic-strutture:    #D97706;
  --ic-clienti:      #2563EB;
  --ic-preventivi:   #A855F7;
  --ic-prenotazioni: #0E7490;
  --ic-checkin:      #059669;
  --ic-sync:         #6366F1;

  /* ── Shadow (light) ── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --shadow-md: 0 6px 16px rgba(28,38,67,0.07), 0 2px 6px rgba(28,38,67,0.04);
  --shadow-lg: 0 16px 40px rgba(28,38,67,0.10), 0 6px 14px rgba(28,38,67,0.05);

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ── Spacing (legacy --od-* compatibility) ── */
  --od-xs:  4px;
  --od-sm:  8px;
  --od-md:  16px;
  --od-lg:  24px;
  --od-xl:  32px;
}


/* ============================================================
   SECTION 3 — Dark mode  [data-theme="dark"]
   ============================================================ */

html[data-theme="dark"] body:not(.mob-body) {
  /* ── Surfaces (feat/design-tokens: era navy; ora neutri del design
     system. Valori hardcoded coerenti con tokens.css per evitare cicli
     `--surface-2: var(--surface-2)` nello stesso scope). */
  --surface-0: #101113;   /* = var(--bg) dark */
  --surface-2: #1E1F23;   /* = var(--surface-2) dark */
  --surface-3: #1A1B1E;   /* = var(--surface) dark */
  --surface-4: #232428;   /* = var(--row-hover) dark */
  --surface-5: #232428;

  /* ── Borders (dark) ── */
  --border-subtle:  rgba(168,148,255,0.06);
  --border-default: rgba(168,148,255,0.12);
  --border-strong:  rgba(168,148,255,0.22);

  /* ── Text (dark) ── */
  --text-primary:   #F1F5F9;
  --text-secondary: #A5B0C7;
  --text-tertiary:  #6B7895;

  /* ── Brand (dark) ── */
  --brand:         #06B6D4;
  --brand-hover:   #22D3EE;
  --brand-soft:    rgba(6,182,212,0.14);
  --brand-strong:  rgba(6,182,212,0.32);
  --brand-text:    #67E8F9;

  /* ── Accent purple (dark) ── */
  --accent-purple: #C084FC;
  --accent-soft:   rgba(192,132,252,0.10);

  /* ── Semantic colors (dark) ── */
  --success:        #10B981;
  --success-soft:   rgba(16,185,129,0.12);
  --success-border: rgba(16,185,129,0.28);
  --success-text:   #34D399;

  --warning:        #F59E0B;
  --warning-soft:   rgba(245,158,11,0.12);
  --warning-border: rgba(245,158,11,0.28);
  --warning-text:   #FBBF24;

  --danger:         #F43F5E;
  --danger-soft:    rgba(244,63,94,0.12);
  --danger-border:  rgba(244,63,94,0.28);
  --danger-text:    #FB7185;

  --info:           #60A5FA;
  --info-soft:      rgba(96,165,250,0.12);
  --info-border:    rgba(96,165,250,0.28);
  --info-text:      #93C5FD;

  /* ── Per-section icon accents (dark) ── */
  --ic-dashboard:    #06B6D4;
  --ic-strutture:    #FBBF24;
  --ic-clienti:      #60A5FA;
  --ic-preventivi:   #C084FC;
  --ic-prenotazioni: #06B6D4;
  --ic-checkin:      #34D399;
  --ic-sync:         #818CF8;

  /* ── Shadow (dark) — più contrasto, meno colore ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.50);
}


/* ============================================================
   SECTION 4 — Bootstrap CSS variable overrides
   ────────────────────────────────────────────────────────────
   Mappa i token nostri sulle CSS variables di Bootstrap 5.3 in
   modo che componenti Bootstrap (.btn, .card, .form-control,
   .alert, .badge, .dropdown) parlino la nostra palette senza
   dover toccare i template.
   ============================================================ */

html[data-theme="light"] body:not(.mob-body) {
  --bs-body-bg:                  var(--surface-0);
  --bs-body-color:               var(--text-primary);
  --bs-secondary-bg:             var(--surface-2);
  --bs-tertiary-bg:              var(--surface-3);
  --bs-border-color:             var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-success:                  var(--success);
  --bs-danger:                   var(--danger);
  --bs-warning:                  var(--warning);
  --bs-primary:                  var(--brand);
  --bs-info:                     var(--info);
  --bs-secondary-color:          var(--text-secondary);
}

html[data-theme="dark"] body:not(.mob-body) {
  --bs-body-bg:                  var(--surface-0);
  --bs-body-color:               var(--text-primary);
  --bs-secondary-bg:             var(--surface-2);
  --bs-tertiary-bg:              var(--surface-3);
  --bs-border-color:             var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-success:                  var(--success);
  --bs-danger:                   var(--danger);
  --bs-warning:                  var(--warning);
  --bs-primary:                  var(--brand);
  --bs-info:                     var(--info);
  --bs-secondary-color:          var(--text-secondary);
}


/* ============================================================
   SECTION 5 — Legacy aliases (compatibility shim)
   ────────────────────────────────────────────────────────────
   I template Django esistenti (50+) usano token storici:
     --od-*       (vecchio ui-tokens.css)
     --bg-*, --accent-*, --primary, --bs-*   (dark-theme.css)
     --p-*        (ui-premium.css)
     --bg, --card, --border, --primary, etc.  (short legacy)

   Tutti questi token vengono ridefiniti come ALIAS dei nuovi.
   Non rimuovere finché tutti i template non sono migrati ai
   nuovi token nativi.

   MOBILE: --mob-* NON viene aliasato — il mobile usa palette
   indipendente in mobile.css ed è fuori scope di questa fase.
   ============================================================ */

body:not(.mob-body) {
  /* ── Vecchio ui-tokens.css (--od-*) ── */
  --od-bg:        var(--surface-0);
  --od-surface:   var(--surface-3);
  --od-surface-2: var(--surface-2);
  --od-surface-h: var(--surface-4);
  --od-border:      var(--border-default);
  --od-border-soft: var(--border-strong);
  --od-text:       var(--text-primary);
  --od-text-soft:  var(--text-secondary);
  --od-text-muted: var(--text-tertiary);
  --od-blue:        var(--brand);
  --od-blue-soft:   var(--brand-soft);
  --od-blue-glow:   var(--brand-strong);
  --od-green:       var(--success);
  --od-green-soft:  rgba(5,150,105,0.08);
  --od-red:         var(--danger);
  --od-red-soft:    rgba(220,38,38,0.08);
  --od-yellow:      var(--warning);
  --od-yellow-soft: rgba(217,119,6,0.08);
  /* Radius alias */
  --od-r-xs:   var(--radius-sm);
  --od-r-sm:   var(--radius-sm);
  --od-r-md:   var(--radius-md);
  --od-r-lg:   var(--radius-lg);
  --od-r-pill: var(--radius-pill);
  /* Shadow alias */
  --od-sh-sm:    var(--shadow-sm);
  --od-sh-md:    var(--shadow-md);
  --od-sh-lg:    var(--shadow-lg);
  --od-sh-inset: inset 0 1px 0 rgba(255,255,255,0.80);

  /* ── dark-theme.css aliases ── */
  --bg-main:       var(--surface-0);
  --bg-container:  var(--surface-2);
  --bg-card:       var(--surface-3);
  --bg-card-hover: var(--surface-4);
  --border-color:  var(--border-default);
  --accent-blue:   var(--brand);
  --accent-green:  var(--success);
  --accent-red:    var(--danger);
  --accent-orange: var(--warning);
  --text-muted:    var(--text-tertiary);

  /* ── Short legacy aliases (usatissimi nei template) ── */
  --bg:           var(--surface-0);
  --bg-elevated:  var(--surface-2);
  --card:         var(--surface-3);
  --card-soft:    var(--surface-4);
  --card-bg:      var(--surface-3);
  --border:       var(--border-default);
  --border-soft:  var(--border-strong);
  --border-light: var(--border-subtle);
  --text-main:    var(--text-primary);
  --primary:      var(--brand);
  --primary-alpha:var(--brand-soft);
  --success-alpha: rgba(34,197,94,0.15);
  --warning-alpha: rgba(245,158,11,0.15);
  --danger-alpha:  rgba(239,68,68,0.15);

  /* ── ui-premium.css aliases (--p-*) ── */
  --p-bg:           var(--surface-0);
  --p-bg-end:       var(--surface-2);
  --p-surface:      var(--surface-3);
  --p-surface-2:    var(--surface-2);
  --p-surface-3:    var(--brand-soft);
  --p-border:       var(--border-default);
  --p-text:         var(--text-primary);
  --p-text-soft:    var(--text-secondary);
  --p-muted:        var(--text-tertiary);
  --p-blue:         var(--brand);
  --p-blue-end:     var(--brand-hover);
  --p-blue-2:       var(--brand-hover);
  --p-glow:         var(--brand-strong);
  --p-glow-blue:    0 4px 18px var(--brand-strong);
  --p-row-hover:    var(--surface-4);
  --p-thead-bg:     var(--surface-2);
  --p-shadow:       var(--shadow-md);
  --p-shadow-hover: var(--shadow-lg);
  --p-shadow-card:  var(--shadow-md);
  --p-bg-sidebar:   var(--sb-bg);
  --p-primary:      var(--brand);
  --p-text-sidebar: var(--sb-text);
  --p-text-muted-sb:var(--sb-text-muted);
  --p-border-glass: var(--sb-border);
}


/* ============================================================
   SECTION 6 — Color-scheme declarations
   ────────────────────────────────────────────────────────────
   Native form controls (input date, select, scrollbar) read
   color-scheme to match light/dark themes automatically.
   ============================================================ */

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark;  }