/**
 * ite-vars.css — Icaro Template Engine
 * CSS Custom Properties (Design Tokens)
 * Versione: 1.0.0
 *
 * UTILIZZO: sovrascrivere in /themes/<progetto>/vars.css
 * per personalizzare colori, font e spacing per ogni progetto.
 */

/* ═══════════════════════════════════════════════════════
   TEMA DEFAULT — DARK (Icaro Service)
   ═══════════════════════════════════════════════════════ */
:root {

  /* ── Colore accento (brandizzabile per progetto) ─────── */
  --ite-accent:          #D52D2D;
  --ite-accent-dark:     #B02020;
  --ite-accent-light:    #FAE3E3;
  --ite-accent-dim:      rgba(213, 45, 45, 0.12);
  --ite-accent-dim2:     rgba(213, 45, 45, 0.20);

  /* ── Sfondi ──────────────────────────────────────────── */
  --ite-bg:              #0F0F0F;   /* sfondo pagina */
  --ite-bg2:             #161616;   /* sidebar, topbar */
  --ite-surface:         #1C1C1C;   /* card, panel */
  --ite-surface2:        #242424;   /* table head, input bg hover */
  --ite-surface3:        #2A2A2A;   /* elementi nested */

  /* ── Bordi ───────────────────────────────────────────── */
  --ite-border:          #2C2C2C;
  --ite-border2:         #383838;
  --ite-border-focus:    var(--ite-accent);

  /* ── Testi ───────────────────────────────────────────── */
  --ite-text:            #E6E4E0;   /* testo principale */
  --ite-text2:           #A8A5A0;   /* testo secondario */
  --ite-text3:           #666460;   /* testo muted, label, hint */
  --ite-text-bright:     #FFFFFF;   /* titoli, valori importanti */
  --ite-text-on-accent:  #FFFFFF;   /* testo su sfondo accento */

  /* ── Colori semantici ────────────────────────────────── */
  --ite-green:           #1D9E75;
  --ite-green-dark:      #167A5B;
  --ite-green-dim:       rgba(29, 158, 117, 0.12);

  --ite-amber:           #BA7517;
  --ite-amber-dark:      #8F5A10;
  --ite-amber-dim:       rgba(186, 117, 23, 0.12);

  --ite-red:             #D52D2D;
  --ite-red-dark:        #B02020;
  --ite-red-dim:         rgba(213, 45, 45, 0.12);

  --ite-blue:            #2E6BE6;
  --ite-blue-dark:       #1F52C0;
  --ite-blue-dim:        rgba(46, 107, 230, 0.12);

  --ite-purple:          #7C3AED;
  --ite-purple-dim:      rgba(124, 58, 237, 0.12);

  --ite-cyan:            #0891B2;
  --ite-cyan-dim:        rgba(8, 145, 178, 0.12);

  /* ── Colori canali comunicazione ─────────────────────── */
  --ite-ch-email:        #2E6BE6;
  --ite-ch-email-dim:    rgba(46, 107, 230, 0.12);
  --ite-ch-telegram:     #29B6F6;
  --ite-ch-telegram-dim: rgba(41, 182, 246, 0.10);
  --ite-ch-whatsapp:     #25D366;
  --ite-ch-whatsapp-dim: rgba(37, 211, 102, 0.10);
  --ite-ch-web:          #666460;
  --ite-ch-web-dim:      rgba(102, 100, 96, 0.15);
  --ite-ch-voicemail:    #BA7517;
  --ite-ch-voicemail-dim:rgba(186, 117, 23, 0.12);

  /* ── Layout ──────────────────────────────────────────── */
  --ite-sidebar-w:       220px;
  --ite-sidebar-w-mini:  56px;
  --ite-header-h:        52px;
  --ite-content-max:     1400px;

  /* ── Spacing ─────────────────────────────────────────── */
  --ite-space-1:         4px;
  --ite-space-2:         8px;
  --ite-space-3:         12px;
  --ite-space-4:         16px;
  --ite-space-5:         20px;
  --ite-space-6:         24px;
  --ite-space-8:         32px;
  --ite-space-10:        40px;

  /* ── Border radius ───────────────────────────────────── */
  --ite-radius-xs:       3px;
  --ite-radius-sm:       5px;
  --ite-radius:          8px;
  --ite-radius-lg:       12px;
  --ite-radius-xl:       16px;
  --ite-radius-full:     9999px;

  /* ── Ombre ───────────────────────────────────────────── */
  --ite-shadow-sm:       0 1px 4px rgba(0, 0, 0, 0.25);
  --ite-shadow:          0 2px 12px rgba(0, 0, 0, 0.35);
  --ite-shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.45);
  --ite-shadow-accent:   0 4px 16px rgba(213, 45, 45, 0.25);

  /* ── Transizioni ─────────────────────────────────────── */
  --ite-transition:      0.15s ease;
  --ite-transition-slow: 0.25s ease;

  /* ── Tipografia ──────────────────────────────────────── */
  --ite-font:            system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ite-font-mono:       'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  --ite-font-size-base:  15px;

  /* ── Font sizes ──────────────────────────────────────── */
  --ite-text-xs:         11px;
  --ite-text-sm:         12px;
  --ite-text-base:       13px;
  --ite-text-md:         15px;
  --ite-text-lg:         17px;
  --ite-text-xl:         20px;
  --ite-text-2xl:        24px;
  --ite-text-3xl:        30px;

  /* ── Z-index scale ───────────────────────────────────── */
  --ite-z-base:          1;
  --ite-z-dropdown:      50;
  --ite-z-sticky:        100;
  --ite-z-sidebar:       160;
  --ite-z-overlay:       200;
  --ite-z-modal:         300;
  --ite-z-toast:         400;
  --ite-z-tooltip:       500;
}

/* ═══════════════════════════════════════════════════════
   TEMA LIGHT
   ═══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --ite-bg:              #F2F0EC;
  --ite-bg2:             #E8E6E2;
  --ite-surface:         #FFFFFF;
  --ite-surface2:        #F5F3EF;
  --ite-surface3:        #EDEAE6;

  --ite-border:          #DDDBD6;
  --ite-border2:         #CCCAC5;

  --ite-text:            #1A1A1A;
  --ite-text2:           #5A5855;
  --ite-text3:           #9A9895;
  --ite-text-bright:     #000000;

  --ite-shadow-sm:       0 1px 4px rgba(0, 0, 0, 0.08);
  --ite-shadow:          0 2px 12px rgba(0, 0, 0, 0.10);
  --ite-shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS (come custom properties JS-leggibili)
   ═══════════════════════════════════════════════════════ */
:root {
  --ite-bp-sm:  576px;
  --ite-bp-md:  768px;
  --ite-bp-lg:  1024px;
  --ite-bp-xl:  1280px;
  --ite-bp-2xl: 1400px;
}