/* Variabili CSS per Dark/Light Mode con Sistema Palette HSL */
:root {
    /* Base HSL values - Default Palette (Blue/Cyan) */
    --primary-hue: 195;
    --secondary-hue: 225;
    --accent-hue: 25;
    
    /* Saturation and Lightness values */
    --primary-saturation: 100%;
    --primary-lightness: 55%;
    --secondary-saturation: 100%;
    --secondary-lightness: 55%;
    --accent-saturation: 85%;
    --accent-lightness: 60%;
    
    /* Computed colors using HSL */
    --primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
    --secondary-color: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
    --accent: hsl(var(--accent-hue), var(--accent-saturation), var(--accent-lightness));
    
    /* Shadow colors based on primary */
    --shadow-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.1);
    --glow-color: hsla(var(--primary-hue), var(--primary-saturation), var(--primary-lightness), 0.3);
    
    /* Variabili comuni per entrambi i temi */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dark-bg: #0a0a0a;
    --dark-card: #1a1a1a;
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --success: #00ff88;
    --border-color: #333;
    --navbar-bg: rgba(10, 10, 10, 0.95);
}

/* Light Mode Variables */
[data-theme="light"] {
    /* Adjust lightness for light theme */
    --primary-lightness: 45%;
    --secondary-lightness: 40%;
    --accent-lightness: 50%;
    
    /* Light theme specific colors */
    --dark-bg: #f8f9fa;
    --dark-card: #ffffff;
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --text-primary: #2c3e50;
    --text-secondary: #6c757d;
    --success: #27ae60;
    --border-color: #e9ecef;
    --navbar-bg: rgba(248, 249, 250, 0.95);
}