/* ============================================
   PATHGEN THEME SYSTEM - CSS VARIABLES
   Supports both Dark and Light modes
   ============================================ */

/* ============================================
   BASE VARIABLES (Default/Dark Theme)
   ============================================ */
:root {
    /* Primary Color - Blue */
    --color-primary: #3B82F6;
    --color-primary-dark: #2563EB;
    --color-primary-light: #60A5FA;
    --color-primary-subtle: rgba(59, 130, 246, 0.15);
    --color-primary-glow: rgba(59, 130, 246, 0.3);
    
    /* Background Colors */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #1a1a1a;
    --color-bg-elevated: #1c1c1c;
    --color-bg-card: rgba(255, 255, 255, 0.03);
    --color-bg-card-hover: rgba(255, 255, 255, 0.05);
    --color-bg-input: rgba(255, 255, 255, 0.05);
    --color-bg-input-focus: rgba(255, 255, 255, 0.08);
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-hover: rgba(255, 255, 255, 0.05);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(59, 130, 246, 0.3);
    --glass-border-light: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(12px);
    --glass-blur-strong: blur(20px);
    
    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #d4d4d8;
    --color-text-muted: #a1a1aa;
    --color-text-light: #52525b;
    --color-text-placeholder: #71717a;
    --color-silver: #d4d4d8;
    --color-silver-muted: rgba(212, 212, 216, 0.5);
    
    /* Border Colors */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.15);
    --color-border-subtle: rgba(255, 255, 255, 0.05);
    --color-border-strong: rgba(255, 255, 255, 0.2);
    
    /* Accent Colors */
    --color-accent-blue: #3B82F6;
    --color-accent-purple: #8B5CF6;
    --color-accent-green: #22c55e;
    --color-accent-orange: #f97316;
    --color-accent-red: #ef4444;
    --color-accent-yellow: #eab308;
    
    /* Status Colors */
    --color-success: #22c55e;
    --color-success-subtle: rgba(34, 197, 94, 0.1);
    --color-success-border: rgba(34, 197, 94, 0.2);
    --color-error: #ef4444;
    --color-error-subtle: rgba(239, 68, 68, 0.1);
    --color-error-border: rgba(239, 68, 68, 0.2);
    --color-warning: #f97316;
    --color-warning-subtle: rgba(249, 115, 22, 0.1);
    --color-info: #3B82F6;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
    --shadow-glow-strong: 0 0 30px rgba(59, 130, 246, 0.4);
    --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* Gradient Overlays */
    --gradient-hero: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                      radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.03) 0%, transparent 40%);
    --gradient-text: linear-gradient(to right, #ffffff, var(--color-primary));
    --gradient-border: linear-gradient(to bottom, var(--color-primary), rgba(59, 130, 246, 0.2));
    
    /* Typography */
    --font-family-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-display: 'Plus Jakarta Sans', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    
    /* Font Sizes */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;
    --font-size-3xl: 36px;
    --font-size-4xl: 48px;
    --font-size-5xl: 64px;
    --font-size-6xl: 80px;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-32: 128px;
    --spacing-40: 160px;
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-6);
    --navbar-height: 80px;
    
    /* Border Radius */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
    --border-radius-xl: 20px;
    --border-radius-2xl: 28px;
    --border-radius-3xl: 36px;
    --border-radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    
    /* Scrollbar */
    --scrollbar-track: var(--color-bg-secondary);
    --scrollbar-thumb: var(--color-border);
    --scrollbar-thumb-hover: var(--color-border-light);
    
    /* Selection */
    --selection-bg: var(--color-primary-subtle);
    --selection-color: var(--color-primary-light);
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
[data-theme="light"] {
    /* Primary Color - Blue (slightly adjusted for light bg) */
    --color-primary: #2563EB;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3B82F6;
    --color-primary-subtle: rgba(37, 99, 235, 0.12);
    --color-primary-glow: rgba(37, 99, 235, 0.2);
    
    /* Background Colors - Soft warm tones */
    --color-bg-primary: #f8f7f4;
    --color-bg-secondary: #f0efe9;
    --color-bg-tertiary: #e8e7e1;
    --color-bg-elevated: #ffffff;
    --color-bg-card: rgba(0, 0, 0, 0.02);
    --color-bg-card-hover: rgba(0, 0, 0, 0.04);
    --color-bg-input: rgba(0, 0, 0, 0.03);
    --color-bg-input-focus: rgba(0, 0, 0, 0.05);
    
    /* Glassmorphism - Darker for light theme */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-hover: rgba(255, 255, 255, 0.9);
    --glass-bg-strong: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-hover: rgba(37, 99, 235, 0.4);
    --glass-border-light: rgba(0, 0, 0, 0.12);
    --glass-blur: blur(12px);
    --glass-blur-strong: blur(20px);
    
    /* Text Colors - Dark for readability */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #6b6b6b;
    --color-text-light: #9a9a9a;
    --color-text-placeholder: #8a8a8a;
    --color-silver: #6b6b6b;
    --color-silver-muted: rgba(107, 107, 107, 0.6);
    
    /* Border Colors */
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-light: rgba(0, 0, 0, 0.12);
    --color-border-subtle: rgba(0, 0, 0, 0.05);
    --color-border-strong: rgba(0, 0, 0, 0.2);
    
    /* Accent Colors - Slightly adjusted */
    --color-accent-blue: #2563EB;
    --color-accent-purple: #7c3aed;
    --color-accent-green: #16a34a;
    --color-accent-orange: #ea580c;
    --color-accent-red: #dc2626;
    --color-accent-yellow: #ca8a04;
    
    /* Status Colors */
    --color-success: #16a34a;
    --color-success-subtle: rgba(22, 163, 74, 0.1);
    --color-success-border: rgba(22, 163, 74, 0.2);
    --color-error: #dc2626;
    --color-error-subtle: rgba(220, 38, 38, 0.1);
    --color-error-border: rgba(220, 38, 38, 0.2);
    --color-warning: #ea580c;
    --color-warning-subtle: rgba(234, 88, 12, 0.1);
    --color-info: #2563EB;
    
    /* Shadows - Lighter for light theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);
    --shadow-glow-strong: 0 0 30px rgba(37, 99, 235, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    
    /* Gradient Overlays */
    --gradient-hero: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
                      radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.05) 0%, transparent 40%);
    --gradient-text: linear-gradient(to right, #1a1a1a, var(--color-primary));
    --gradient-border: linear-gradient(to bottom, var(--color-primary), rgba(37, 99, 235, 0.2));
    
    /* Scrollbar */
    --scrollbar-track: var(--color-bg-secondary);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
    
    /* Selection */
    --selection-bg: rgba(37, 99, 235, 0.15);
    --selection-color: #1d4ed8;
}

/* ============================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.1);
        --glass-border: rgba(255, 255, 255, 0.3);
        --color-text-secondary: #ffffff;
        --color-text-muted: #cccccc;
    }
    
    [data-theme="light"] {
        --glass-bg: rgba(0, 0, 0, 0.05);
        --glass-border: rgba(0, 0, 0, 0.3);
        --color-text-secondary: #000000;
        --color-text-muted: #333333;
    }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-theme: 0ms;
    }
}