/* ============================================
   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);

    /* Primary accent - used for highlights, links, badges */
    --accent-primary: #3b82f6;
    --accent-hover: #2563eb;

    /* 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;

    /* Brand Gold - Premium accent for CTAs and highlights */
    --gold: #c9a962;
    --gold-light: #d4b872;
    --gold-dark: #b8943f;
}

/* Light Theme - Sophisticated Warm Gray
   Inspired by premium interfaces like Linear, Notion, and Vercel.
   Not stark white - soft, warm, with depth and character. */
[data-theme="light"] {
    /* Backgrounds - Warm gray tones with subtle warmth */
    --bg-primary: #f4f4f5;           /* Soft warm gray - main background */
    --bg-secondary: #e8e8eb;         /* Slightly darker for sections */
    --bg-tertiary: #eaeaed;          /* Alternative section bg */
    --bg-card: #ffffff;              /* Cards stay white for contrast */
    --bg-card-hover: #fafafa;        /* Subtle hover state */

    /* Text - Rich, readable grays (not pure black) */
    --text-primary: #18181b;         /* Near-black, warm undertone */
    --text-secondary: #52525b;       /* Medium gray for secondary text */
    --text-tertiary: #71717a;        /* Lighter gray for tertiary */
    --text-muted: #a1a1aa;           /* Muted for labels/hints */

    /* Glass/Surface effects - More visible in light mode */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-hover: rgba(0, 0, 0, 0.15);
    --glass-hover: rgba(0, 0, 0, 0.03);
    --accent: #18181b;
    --accent-dim: rgba(0, 0, 0, 0.04);

    /* Hero gradient - Subtle depth, not flat */
    --gradient-hero: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 50%, #f4f4f5 100%);

    /* Elegant Ambient Effects - More pronounced for light mode */
    --glow-primary: rgba(99, 102, 241, 0.08);      /* Indigo tint */
    --glow-secondary: rgba(79, 70, 229, 0.06);    /* Purple tint */
    --glow-accent: rgba(99, 102, 241, 0.1);       /* Stronger accent glow */
    --ambient-gradient: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 60%);

    /* Shadows - More pronounced for depth */
    --depth-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
    --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --top-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 40%);

    /* Premium Blue Accent System - Vibrant but not harsh */
    --premium-blue: #4f46e5;         /* Indigo - more premium feel */
    --premium-blue-light: #6366f1;
    --premium-blue-dark: #3730a3;
    --premium-blue-glass: rgba(79, 70, 229, 0.08);
    --premium-blue-glow: rgba(79, 70, 229, 0.12);
    --premium-blue-border: rgba(79, 70, 229, 0.2);
}

/* ============================================
   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;
    }
}