/**
 * Design System Variables
 * Tema: Arancio-Nero Premium (Colori Aziendali)
 * Ispirato a design moderni e accattivanti
 */

:root {
    /* === COLORI PRIMARI - Arancio Vibrante === */
    --primary: #ff6b00;           /* Arancio principale vibrante */
    --primary-light: #ff8533;     /* Arancio chiaro */
    --primary-dark: #cc5500;      /* Arancio scuro */
    --primary-glow: rgba(255, 107, 0, 0.4);
    --primary-subtle: rgba(255, 107, 0, 0.1);
    
    /* === COLORI ACCENT - Complementari === */
    --accent: #ff9500;            /* Arancio dorato */
    --accent-warm: #ffb347;       /* Arancio caldo */
    
    /* === COLORI SEMANTICI === */
    --success: #00d26a;           /* Verde brillante */
    --success-glow: rgba(0, 210, 106, 0.3);
    --warning: #ffcc00;           /* Giallo dorato */
    --danger: #ff3b3b;            /* Rosso */
    --info: #00b4d8;              /* Cyan */
    
    /* === SFONDO - Nero Profondo con Sfumature === */
    --bg-darkest: #000000;        /* Nero puro */
    --bg-dark: #050505;           /* Quasi nero */
    --bg: #0a0a0a;                /* Sfondo principale */
    --bg-card: #121212;           /* Card */
    --bg-elevated: #1a1a1a;       /* Elementi elevati */
    --bg-hover: #1f1f1f;          /* Hover state */
    --bg-glass: rgba(18, 18, 18, 0.8);
    
    /* === TESTO === */
    --text: #ffffff;              /* Testo principale */
    --text-secondary: #f0f0f0;    /* Testo secondario */
    --text-muted: #888888;        /* Testo attenuato */
    --text-disabled: #444444;     /* Testo disabilitato */
    
    /* === BORDI === */
    --border: #1f1f1f;
    --border-light: #2a2a2a;
    --border-glow: rgba(255, 107, 0, 0.5);
    
    /* === GRADIENTI PREMIUM === */
    --gradient-primary: linear-gradient(135deg, #ff6b00 0%, #ff9500 50%, #ffb347 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #ffb347 0%, #ff9500 50%, #ff6b00 100%);
    --gradient-dark: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
    --gradient-glow: radial-gradient(ellipse at center, var(--primary-glow) 0%, transparent 70%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(255, 107, 0, 0.15) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(255, 149, 0, 0.1) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(255, 107, 0, 0.08) 0px, transparent 50%);
    --gradient-card: linear-gradient(145deg, #151515 0%, #0d0d0d 100%);
    --gradient-shine: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    
    /* === OMBRE PREMIUM === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 30px var(--primary-glow);
    --shadow-glow-lg: 0 0 60px var(--primary-glow), 0 0 100px rgba(255, 107, 0, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    
    /* === TIPOGRAFIA === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-soft: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-display: 'Inter', sans-serif;
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.75rem;
    --text-5xl: 3.5rem;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;
    
    /* === SPAZIATURA === */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* === BORDER RADIUS === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    
    /* === TRANSIZIONI SMOOTH === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* === LAYOUT === */
    --sidebar-width: 280px;
    --content-max-width: 960px;
    --header-height: 72px;
    
    /* === Z-INDEX === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}