/**
 * variables.css
 *
 * Design system C-UAS — variabili CSS globali.
 * Palette scura operativa con glassmorphism per ambiente militare/C2.
 * Accent teal per elementi primari, amber per warning/urgenza.
 *
 * @module    Design System
 * @version   1.0.0
 * @since     2026-06-18
 *
 * Changelog:
 *   1.0.0  2026-06-18  Prima versione — palette, glass layers, tipografia
 */

:root {
  /* ── Banner CUI — altezza aggiornata dinamicamente da syncBannerHeight() in app.js ── */
  --cui-banner-h: 25px; /* fallback: 1 riga (~0.65rem × 1.8 + 6px padding) */

  /* ── Sfondo base ── */
  --bg-primary: #0a0e17;
  --bg-gradient: linear-gradient(135deg, #0a0e17 0%, #101829 40%, #0d1520 100%);

  /* ── Glassmorphism layers ── */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-focus: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-blur: blur(16px);
  --glass-blur-strong: blur(24px);

  /* ── Accent colors ── */
  --accent-primary: #2dd4bf;
  --accent-primary-hover: #5eead4;
  --accent-secondary: #f59e0b;
  --accent-glow: rgba(45, 212, 191, 0.20);
  --accent-glow-strong: rgba(45, 212, 191, 0.35);

  /* ── Testo ── */
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.28);
  --text-on-accent: #0a0e17;

  /* ── Feedback ── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ── Raggi bordo ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* ── Transizioni ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Tipografia ──
     Satoshi + DM Sans: self-hosted in /assets/fonts/ quando disponibili.
     Fallback: Segoe UI (Windows), system-ui per buona resa senza download. */
  --font-display: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.25rem + 0.625vw, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);

  /* ── Sidebar (sempre scura per leggibilità operativa) ── */
  --sidebar-bg: rgba(10, 14, 23, 0.85);
  --sidebar-text: rgba(255, 255, 255, 0.90);
  --sidebar-text-muted: rgba(255, 255, 255, 0.50);
  --sidebar-border: rgba(255, 255, 255, 0.10);
  /* Accent sidebar invariante: sempre bright teal anche in tema chiaro
     perché la sidebar è always-dark — non sovrascrivere in [data-theme="light"] */
  --sidebar-accent: #2dd4bf;
  --sidebar-accent-hover: #5eead4;
  --sidebar-accent-glow: rgba(45, 212, 191, 0.16);
  --sidebar-accent-glow-strong: rgba(45, 212, 191, 0.30);

  /* ── Layout ── */
  --sidebar-width: 260px;
  --header-height: 64px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

/* ==========================================================================
   TEMA CHIARO
   Override variabili quando html[data-theme="light"]
   ========================================================================== */

[data-theme="light"] {
  /* ── Sfondo base — slate desaturato, non bianco piatto ── */
  --bg-primary: #e8ecf1;
  --bg-gradient: linear-gradient(145deg, #dce2ea 0%, #e8ecf1 35%, #d5dce6 70%, #e2e7ee 100%);

  /* ── Glassmorphism layers — ombre reali su fondo chiaro ── */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-bg-subtle: rgba(255, 255, 255, 0.30);
  --glass-border: rgba(255, 255, 255, 0.70);
  --glass-border-focus: rgba(13, 148, 136, 0.30);
  --glass-shadow: 0 4px 24px rgba(0, 20, 60, 0.08), 0 1px 3px rgba(0, 20, 60, 0.06);
  --glass-blur: blur(16px);
  --glass-blur-strong: blur(24px);

  /* ── Accent colors ── */
  --accent-primary: #0d9488;
  --accent-primary-hover: #0f766e;
  --accent-secondary: #d97706;
  --accent-glow: rgba(13, 148, 136, 0.12);
  --accent-glow-strong: rgba(13, 148, 136, 0.22);

  /* ── Testo — non nero puro, blue-gray scuro ── */
  --text-primary: #1a2332;
  --text-secondary: #4a5568;
  --text-muted: #8896a8;
  --text-on-accent: #ffffff;

  /* ── Feedback ── */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* ── Sidebar light: sfondo chiaro slate, testo scuro ── */
  --sidebar-bg: rgba(241, 245, 249, 0.97);
  --sidebar-text: rgba(15, 23, 42, 0.88);
  --sidebar-text-muted: rgba(30, 41, 59, 0.50);
  --sidebar-border: rgba(0, 0, 0, 0.08);
  /* sidebar-accent light: usa variante teal più scura per contrasto su fondo chiaro */
  --sidebar-accent: #0d9488;
  --sidebar-accent-hover: #0f766e;
  --sidebar-accent-glow: rgba(13, 148, 136, 0.12);
  --sidebar-accent-glow-strong: rgba(13, 148, 136, 0.22);
}