:root {
    /* 
     * Modern Glassmorphism Variable System
     * Design: Premium tech aesthetic with depth
     */

    /* Base Colors */
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.75);
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;

    /* Accent Gradients */
    --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --accent-gradient-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;

    /* Glass Effects */
    --glass-blur: 12px;
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-shadow-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.25);

    /* Typography */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-max-width: 1200px;
    --grid-gap: 24px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f0f0f;
        --bg-secondary: #1a1a1a;
        --bg-glass: rgba(26, 26, 26, 0.75);
        --text-primary: #ffffff;
        --text-secondary: #aaaaaa;
        --text-muted: #666666;
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
        --glass-shadow-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.7);
    }
}