/**
 * Ask Bob - Theme Tokens
 * Single source of truth for colors across light/dark modes
 * All marketing pages should import this file
 */

:root {
    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f6f7f9;
    --bg-tertiary: #eef0f4;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    
    --border-default: #e5e7eb;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-strong: #d1d5db;
    
    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-error: #ef4444;
    --accent-info: #3b82f6;
    
    --link-default: #2563eb;
    --link-hover: #1d4ed8;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);
    
    /* Nav-specific */
    --nav-bg: #ffffff;
    --nav-border: #e5e7eb;
    --nav-text: #374151;
    --nav-text-hover: #111827;
    --nav-dropdown-bg: #ffffff;
    --nav-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Dark mode */
[data-theme="dark"],
.dark-theme,
body.dark {
    --bg-primary: #0b0f19;
    --bg-secondary: #121a2a;
    --bg-tertiary: #1a2332;
    --surface: #0e1426;
    --surface-elevated: #162033;
    
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-inverse: #111827;
    
    --border-default: #243044;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: #374151;
    
    --link-default: #60a5fa;
    --link-hover: #93c5fd;
    
    /* Shadows in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
    
    /* Nav-specific dark */
    --nav-bg: #0e1426;
    --nav-border: #243044;
    --nav-text: #d1d5db;
    --nav-text-hover: #ffffff;
    --nav-dropdown-bg: #162033;
    --nav-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Marketing pages dark theme (gradient background) */
.marketing-dark,
.pillar-page,
.waitlist-page {
    --bg-primary: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.7);
    --border-default: rgba(255, 255, 255, 0.1);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-elevated: rgba(255, 255, 255, 0.08);
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0b0f19;
        --bg-secondary: #121a2a;
        --bg-tertiary: #1a2332;
        --surface: #0e1426;
        --surface-elevated: #162033;
        
        --text-primary: #f3f4f6;
        --text-secondary: #d1d5db;
        --text-muted: #9ca3af;
        --text-inverse: #111827;
        
        --border-default: #243044;
        --border-subtle: rgba(255, 255, 255, 0.08);
        --border-strong: #374151;
        
        --link-default: #60a5fa;
        --link-hover: #93c5fd;
        
        --nav-bg: #0e1426;
        --nav-border: #243044;
        --nav-text: #d1d5db;
        --nav-text-hover: #ffffff;
        --nav-dropdown-bg: #162033;
    }
}