/* ==========================================================================
   TRACCIATO STUDIO OS - DESIGN SYSTEM TOKENS
   Stile: Modern Dark Minimal / Swiss Precision Ergonomics
   Palette: Ardesia Tecnica (#0B0E14), Layering Profondo e 4 Colori Semantici
   ========================================================================== */

:root {
  /* --- SUPERFICI E LIVELLI DI PROFONDITÀ (DARK OBSIDIAN) --- */
  --bg-base: #0B0E14;              /* Superficie 0: Sfondo telaio generale */
  --surface-1: #121620;            /* Superficie 1: Sfondo card e contenitori primari */
  --surface-2: #181E2B;            /* Superficie 2: Sottosezioni, righe alternate, input */
  --surface-3: #202738;            /* Superficie 3: Hover states, popup, menu a tendina */
  --surface-active-task: #141C24;  /* Superficie speciale: banner attività in corso */

  /* --- BORDI E LINEE DI PRECISIONE (MICROMETRICI 1PX) --- */
  --border-subtle: rgba(255, 255, 255, 0.07);  /* Separatori interni discreti */
  --border-medium: rgba(255, 255, 255, 0.12);  /* Bordi card e pulsanti */
  --border-strong: rgba(255, 255, 255, 0.20);  /* Bordi in evidenza */
  --border-focus: rgba(59, 130, 246, 0.50);   /* Focus accessibilità */

  /* --- GERARCHIA TIPOGRAFICA IN SCALA DI GRIGI CALIBRATA --- */
  /* Elimina il bianco piatto uniforme: crea profondità di lettura subconscia */
  --text-primary: #F1F5F9;         /* 95% Luminanza: Titoli principali, cifre timer, testo chiave */
  --text-secondary: #CBD5E1;       /* 80% Luminanza: Titoli compiti, etichette interattive */
  --text-body: #94A3B8;            /* 60% Luminanza: Descrizioni, sottotitoli, valori normali */
  --text-muted: #64748B;           /* 45% Luminanza: Metadati, codici pratica, date, intestazioni tabelle */
  --text-dim: #475569;             /* 32% Luminanza: Separatori, prefissi, scorciatoie tastiera */

  /* --- I SOLI 4 COLORI SEMANTICI FUNZIONALI --- */
  /* Blu Azione: Collegamenti, selezioni attive, pulsanti primari */
  --blue: #3B82F6;
  --blue-hover: #2563EB;
  --blue-subtle: rgba(59, 130, 246, 0.12);
  --blue-border: rgba(59, 130, 246, 0.28);

  /* Verde Operativo: Timer acceso, compiti completati, successo */
  --emerald: #10B981;
  --emerald-hover: #059669;
  --emerald-subtle: rgba(16, 185, 129, 0.10);
  --emerald-border: rgba(16, 185, 129, 0.25);
  --emerald-glow: rgba(16, 185, 129, 0.20);

  /* Ambra Scadenza: Attenzione, scadenze entro 48h, compiti in attesa */
  --amber: #F59E0B;
  --amber-hover: #D97706;
  --amber-subtle: rgba(245, 158, 11, 0.10);
  --amber-border: rgba(245, 158, 11, 0.25);

  /* Rosso Urgente: Scadenze perentorie superate, anomalie, blocchi */
  --rose: #EF4444;
  --rose-hover: #DC2626;
  --rose-subtle: rgba(239, 68, 68, 0.10);
  --rose-border: rgba(239, 68, 68, 0.25);

  /* --- TIPOGRAFIA --- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Dimensioni e Interlinea */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 0.9375rem;   /* 15px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */

  /* Spaziature e Raggi di Curvatura */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 9999px;

  /* Ombre Ottiche e Sovrapposizioni di Profondità */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-active: 0 0 24px rgba(16, 185, 129, 0.12);

  /* --- ELEMENTI DINAMICI ATTIVITÀ IN CORSO & BADGE (DARK) --- */
  --active-banner-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(18, 22, 33, 0.95) 100%);
  --active-banner-border: var(--emerald-border);
  --active-banner-glow: radial-gradient(circle at 100% 50%, rgba(16, 185, 129, 0.08), transparent 70%);
  --active-timer-bg: rgba(0, 0, 0, 0.40);
  --active-timer-border: var(--border-subtle);
  --active-timer-digits: var(--text-primary);
  --active-timer-label: var(--text-dim);
  --active-code-bg: rgba(255, 255, 255, 0.05);
  --active-code-text: var(--text-muted);

  --badge-neutral-bg: rgba(255, 255, 255, 0.05);
  --badge-neutral-text: var(--text-muted);
  --badge-neutral-border: var(--border-subtle);

  --btn-pause-bg: rgba(245, 158, 11, 0.08);
  --btn-pause-border: var(--amber-border);
  --btn-pause-text: #FBBF24;
  --btn-complete-bg: rgba(16, 185, 129, 0.12);
  --btn-complete-border: var(--emerald-border);
  --btn-complete-text: #34D399;

  /* Transizioni */
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- TEMA CARTA CHIARA (PAPER LIGHT MODE) --- */
:root[data-theme="light"], [data-theme="light"] {
  --bg-base: #F8FAFC;
  --surface-1: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;
  --surface-active-task: #F0FDF4;

  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.14);
  --border-strong: rgba(15, 23, 42, 0.24);

  --text-primary: #0F172A;
  --text-secondary: #1E293B;
  --text-body: #475569;
  --text-muted: #64748B;
  --text-dim: #94A3B8;

  /* Elementi Dinamici Attività in Corso & Badge (Light - Carta Fresca e Massima Leggibilità) */
  --active-banner-bg: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
  --active-banner-border: rgba(16, 185, 129, 0.35);
  --active-banner-glow: radial-gradient(circle at 100% 50%, rgba(16, 185, 129, 0.15), transparent 70%);
  --active-timer-bg: #FFFFFF;
  --active-timer-border: rgba(16, 185, 129, 0.28);
  --active-timer-digits: #065F46;
  --active-timer-label: #059669;
  --active-code-bg: rgba(15, 23, 42, 0.06);
  --active-code-text: #334155;

  --badge-neutral-bg: #E2E8F0;
  --badge-neutral-text: #334155;
  --badge-neutral-border: #CBD5E1;

  --btn-pause-bg: #FEF3C7;
  --btn-pause-border: #F59E0B;
  --btn-pause-text: #92400E;
  --btn-complete-bg: #10B981;
  --btn-complete-border: #059669;
  --btn-complete-text: #FFFFFF;

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 12px 30px rgba(15, 23, 42, 0.10);
  --shadow-active: 0 0 20px rgba(16, 185, 129, 0.15);
}