/* ============================================
   CSS VARIABLES - Theme & Design Tokens
   ============================================ */

:root {
    /* Colors - Dark Theme (Default) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #0d0d0f;
    --bg-card: #151515;
    --bg-card-hover: #1a1a1f;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-muted: rgba(255, 255, 255, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-hover: rgba(255, 255, 255, 0.06);
    --accent: rgba(255, 255, 255, 0.9);
    --accent-dim: rgba(255, 255, 255, 0.05);
    --gradient-hero: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);

    /* Elegant Ambient Effects */
    --glow-primary: rgba(100, 120, 180, 0.08);
    --glow-secondary: rgba(80, 100, 160, 0.06);
    --glow-accent: rgba(140, 160, 220, 0.1);
    --ambient-gradient: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(60, 80, 140, 0.08) 0%, transparent 60%);
    --depth-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    --soft-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --top-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 30%);

    /* Premium Blue Accent System */
    --premium-blue: #3b82f6;
    --premium-blue-light: #60a5fa;
    --premium-blue-dark: #1e40af;
    --premium-blue-glass: rgba(59, 130, 246, 0.1);
    --premium-blue-glow: rgba(59, 130, 246, 0.15);
    --premium-blue-border: rgba(59, 130, 246, 0.2);

    /* Spacing */
    --container-max: 1400px;
    --container-padding: 40px;
    --section-padding: 120px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
    --transition-slow: 0.5s;

    /* Borders */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 24px;

    /* ============================================
       DESIGN SYSTEM SCALES (Unified)
       ============================================ */

    /* Icon Sizing Scale */
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;

    /* Spacing/Padding Scale */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 40px;

    /* Animation Timing Scale */
    --animation-fast: 0.2s;
    --animation-normal: 0.3s;
    --animation-slow: 0.5s;
    --animation-reveal: 0.8s;
    --animation-signature: 1.5s;

    /* Card Interaction States */
    --card-lift-sm: -2px;
    --card-lift-md: -4px;
    --card-lift-lg: -8px;

    /* Semantic Accent Colors */
    --accent-problem: #ef4444;
    --accent-solution: #22c55e;
    --accent-info: #3b82f6;
    --accent-warning: #f59e0b;
    --accent-success: #10b981;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #fafafa;
    --bg-secondary: #f0f0f0;
    --bg-tertiary: #f5f5f7;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f8f8;
    --text-primary: #0a0a0a;
    --text-secondary: rgba(10, 10, 10, 0.7);
    --text-tertiary: rgba(10, 10, 10, 0.5);
    --text-muted: rgba(10, 10, 10, 0.4);
    --glass-bg: rgba(0, 0, 0, 0.02);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-hover: rgba(0, 0, 0, 0.15);
    --glass-hover: rgba(0, 0, 0, 0.04);
    --accent: rgba(0, 0, 0, 0.9);
    --accent-dim: rgba(0, 0, 0, 0.05);
    --gradient-hero: linear-gradient(135deg, #fafafa 0%, #e8e8e8 50%, #fafafa 100%);

    /* Elegant Ambient Effects - Light */
    --glow-primary: rgba(100, 120, 180, 0.06);
    --glow-secondary: rgba(80, 100, 160, 0.04);
    --glow-accent: rgba(100, 120, 180, 0.08);
    --ambient-gradient: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(200, 210, 240, 0.15) 0%, transparent 60%);
    --depth-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    --soft-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    --inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --top-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 30%);

    /* Premium Blue Accent System - Light */
    --premium-blue: #2563eb;
    --premium-blue-light: #3b82f6;
    --premium-blue-dark: #1e40af;
    --premium-blue-glass: rgba(37, 99, 235, 0.08);
    --premium-blue-glow: rgba(37, 99, 235, 0.12);
    --premium-blue-border: rgba(37, 99, 235, 0.15);
}

/* ============================================
   RESPONSIVE VARIABLE OVERRIDES
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --container-padding: 24px;
        --section-padding: 80px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
        --section-padding: 60px;
    }
}