/* 
  ====================================
  CSS VARIABLES - Tema & Design System
  ====================================
*/

:root {
    /* Primary Colors */
    --primary-green: #c56bff;
    --primary-blue: #c56bff;
    --primary-blue-light: #e1b3ff;
    
    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #b34dff 0%, #e08cff 100%);
    --gradient-reverse: linear-gradient(135deg, #e08cff 0%, #b34dff 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(179, 77, 255, 0.12) 0%, rgba(224, 140, 255, 0.08) 100%);
    
    /* Neutral Colors */
    --bg-dark: #050507;
    --bg-darker: #020204;
    --bg-card: #0c0912;
    --text-light: #d8a7ff;
    --text-muted: #b982e2;
    --text-dark: #2a2f36;
    
    /* Accent Colors */
    --accent-yellow: #FFB84D;
    --accent-gold: #BBCB2E;
    --accent-pink: #FF6B9D;
    --accent-purple: #9B59B6;
    
    /* Semantic Colors */
    --success: #00A86B;
    --warning: #FFB84D;
    --error: #FF6B6B;
    --info: #c56bff;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
    --shadow-glow-green: 0 0 20px rgba(197, 107, 255, 0.35);
    --shadow-glow-blue: 0 0 20px rgba(197, 107, 255, 0.42);
    
    /* Spacing Scale (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Typography */
    --font-primary: 'JetBrains Mono', 'Fira Code', monospace;
    --font-secondary: 'JetBrains Mono', 'Fira Code', monospace;
    
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 40px;
    --fs-5xl: 48px;
    
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Line Heights */
    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;
    
    /* Letter Spacing */
    --ls-tight: -0.5px;
    --ls-normal: 0px;
    --ls-wide: 0.5px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    
    /* Container Widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;

    /* Hero dotted wallpaper (default: dark mode) */
    --hero-bg-color: #07080b;
    --hero-dot-color: rgba(197, 107, 255, 0.16);
    --page-bg-color: #050507;
    --page-bg-image: url('../assets/images/dark_background.png');
    --page-dot-color: rgba(197, 107, 255, 0.42);
    --page-grid-line-color: rgba(197, 107, 255, 0.08);
    --header-bg: rgba(5, 5, 7, 0.9);
    --header-fg: #d8a7ff;
    --header-control-bg: rgba(255, 255, 255, 0.03);
    --header-control-border: rgba(255, 255, 255, 0.16);
    --ambient-tint: rgba(197, 107, 255, 0.14);
    --ambient-blur: 60px;
}

/* Dark theme (default) */
/* Auto: matches OS preference */
@media (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) {
        --primary-green: #7b2fb1;
        --primary-blue: #7b2fb1;
        --primary-blue-light: #9b4fd1;
        --gradient-primary: linear-gradient(135deg, #7b2fb1 0%, #b34dff 100%);
        --gradient-reverse: linear-gradient(135deg, #b34dff 0%, #7b2fb1 100%);
        --gradient-subtle: linear-gradient(135deg, rgba(123, 47, 177, 0.14) 0%, rgba(179, 77, 255, 0.1) 100%);
        --bg-dark: #ffffff;
        --bg-darker: #efe8dd;
        --bg-card: #f8f1ea;
        --text-light: #2f143a;
        --text-muted: #56305f;
        --text-dark: #e8e8e8;
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
        --shadow-lg: 0 10px 15px rgba(0,0,0,0.12);
        --hero-bg-color: #f7f1e3;
        --hero-dot-color: #c56bff;
        --page-bg-color: #f7f1e3;
        --page-bg-image: url('../assets/images/light_background.png');
        --page-dot-color: #d8cdb8;
        --page-grid-line-color: rgba(111, 79, 132, 0.14);
        --header-bg: rgba(247, 241, 227, 0.92);
        --header-fg: #2f143a;
        --header-control-bg: rgba(47, 20, 58, 0.08);
        --header-control-border: rgba(47, 20, 58, 0.28);
        --ambient-tint: rgba(197, 107, 255, 0.08);
    }
}

/* Manual light theme (set via JS toggle) */
[data-theme='light'] {
    --primary-green: #7b2fb1;
    --primary-blue: #7b2fb1;
    --primary-blue-light: #9b4fd1;
    --gradient-primary: linear-gradient(135deg, #7b2fb1 0%, #b34dff 100%);
    --gradient-reverse: linear-gradient(135deg, #b34dff 0%, #7b2fb1 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(123, 47, 177, 0.14) 0%, rgba(179, 77, 255, 0.1) 100%);
    --bg-dark: #ffffff;
    --bg-darker: #efe8dd;
    --bg-card: #f8f1ea;
    --text-light: #2f143a;
    --text-muted: #56305f;
    --text-dark: #e8e8e8;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.12);
    --hero-bg-color: #f7f1e3;
    --hero-dot-color: #c56bff;
    --page-bg-color: #f7f1e3;
    --page-bg-image: url('../assets/images/light_background.png');
    --page-dot-color: #d8cdb8;
    --page-grid-line-color: rgba(111, 79, 132, 0.14);
    --header-bg: rgba(247, 241, 227, 0.92);
    --header-fg: #2f143a;
    --header-control-bg: rgba(47, 20, 58, 0.08);
    --header-control-border: rgba(47, 20, 58, 0.28);
    --ambient-tint: rgba(197, 107, 255, 0.08);
}

/* Manual dark theme (set via JS toggle) */
[data-theme='dark'] {
    --bg-dark: #050507;
    --bg-darker: #020204;
    --bg-card: #0c0912;
    --text-light: #d8a7ff;
    --text-muted: #b982e2;
    --hero-bg-color: #050507;
    --hero-dot-color: rgba(197, 107, 255, 0.16);
    --page-bg-color: #050507;
    --page-bg-image: url('../assets/images/dark_background.png');
    --page-dot-color: rgba(197, 107, 255, 0.42);
    --page-grid-line-color: rgba(197, 107, 255, 0.08);
    --header-bg: rgba(5, 5, 7, 0.9);
    --header-fg: #d8a7ff;
    --header-control-bg: rgba(255, 255, 255, 0.03);
    --header-control-border: rgba(255, 255, 255, 0.16);
    --ambient-tint: rgba(197, 107, 255, 0.14);
}

/* Smooth theme transitions */
*, *::before, *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}