/* CSS Variables for mikebs.com Landing Page */
/* Light and Dark theme definitions with smooth transitions */

:root {
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
    
    /* Z-index scale */
    --z-canvas: -1;
    --z-base: 1;
    --z-header: 100;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 400;
}

/* Light Theme */
[data-theme="light"] {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: #ffffff;
    
    /* Text colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;
    
    /* Accent colors - subtle blues */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-secondary: #06b6d4;
    --accent-tertiary: #8b5cf6;
    
    /* Geometric pattern colors */
    --geo-line: rgba(59, 130, 246, 0.15);
    --geo-line-hover: rgba(59, 130, 246, 0.4);
    --geo-node: rgba(59, 130, 246, 0.3);
    --geo-node-hover: rgba(59, 130, 246, 0.8);
    
    /* Border colors */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-focus: #3b82f6;
    
    /* Shadows for light theme */
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-button: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
    
    /* Status colors */
    --status-success: #10b981;
    --status-error: #ef4444;
    --status-warning: #f59e0b;
    --status-info: #3b82f6;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background colors - deep blues/purples */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-elevated: #1e293b;
    
    /* Text colors */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;
    --text-inverse: #0f172a;
    
    /* Accent colors - cyan/orange */
    --accent-primary: #06b6d4;
    --accent-primary-hover: #22d3ee;
    --accent-secondary: #f97316;
    --accent-tertiary: #a855f7;
    
    /* Geometric pattern colors */
    --geo-line: rgba(6, 182, 212, 0.15);
    --geo-line-hover: rgba(6, 182, 212, 0.5);
    --geo-node: rgba(249, 115, 22, 0.3);
    --geo-node-hover: rgba(249, 115, 22, 0.8);
    
    /* Border colors */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: #06b6d4;
    
    /* Shadows for dark theme */
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-button: 0 4px 6px -1px rgba(6, 182, 212, 0.2);
    
    /* Status colors */
    --status-success: #34d399;
    --status-error: #f87171;
    --status-warning: #fbbf24;
    --status-info: #22d3ee;
}

/* System preference fallback (default to light) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Background colors */
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --bg-elevated: #1e293b;
        
        /* Text colors */
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-tertiary: #64748b;
        --text-inverse: #0f172a;
        
        /* Accent colors */
        --accent-primary: #06b6d4;
        --accent-primary-hover: #22d3ee;
        --accent-secondary: #f97316;
        --accent-tertiary: #a855f7;
        
        /* Geometric pattern colors */
        --geo-line: rgba(6, 182, 212, 0.15);
        --geo-line-hover: rgba(6, 182, 212, 0.5);
        --geo-node: rgba(249, 115, 22, 0.3);
        --geo-node-hover: rgba(249, 115, 22, 0.8);
        
        /* Border colors */
        --border-primary: #334155;
        --border-secondary: #475569;
        --border-focus: #06b6d4;
        
        /* Shadows */
        --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        --shadow-button: 0 4px 6px -1px rgba(6, 182, 212, 0.2);
        
        /* Status colors */
        --status-success: #34d399;
        --status-error: #f87171;
        --status-warning: #fbbf24;
        --status-info: #22d3ee;
    }
}

/* Smooth theme transitions for all properties */
*,
*::before,
*::after {
    transition: background-color var(--transition-medium),
                border-color var(--transition-medium),
                color var(--transition-medium),
                box-shadow var(--transition-medium),
                opacity var(--transition-medium);
}

/* Disable transitions for geometric canvas */
canvas {
    transition: none !important;
}