/* ============================================
   TAYSTIFY THEME TOKENS
   Minimal CSS variables for light/dark mode
   Uses prefers-color-scheme for OS detection
   ============================================ */

:root {
    /* Light mode (default) */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f8f8;
    --theme-bg-card: #ffffff;
    --theme-bg-surface: #fafafa;
    
    --theme-text-primary: #1a1a1a;
    --theme-text-secondary: #666666;
    --theme-text-tertiary: #999999;
    
    --theme-border: rgba(0, 0, 0, 0.08);
    --theme-border-hover: rgba(0, 0, 0, 0.12);
    
    /* Brand colors (same in both modes) */
    --theme-brand-primary: #FFB300;
    --theme-brand-hover: #e6a000;
}

/* Force theme via attribute (used by app WebView) */
html[data-theme="light"] {
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f8f8;
    --theme-bg-card: #ffffff;
    --theme-bg-surface: #fafafa;
    
    --theme-text-primary: #1a1a1a;
    --theme-text-secondary: #666666;
    --theme-text-tertiary: #999999;
    
    --theme-border: rgba(0, 0, 0, 0.08);
    --theme-border-hover: rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] {
    --theme-bg-primary: #0f0f0f;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-card: #1e1e1e;
    --theme-bg-surface: #242424;
    
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #e0e0e0;
    --theme-text-tertiary: #b0b0b0;
    
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-border-hover: rgba(255, 255, 255, 0.12);
}

/* Dark mode via OS preference ONLY */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-bg-primary: #0f0f0f;
        --theme-bg-secondary: #1a1a1a;
        --theme-bg-card: #1e1e1e;
        --theme-bg-surface: #242424;
        
        --theme-text-primary: #ffffff;
        --theme-text-secondary: #e0e0e0;
        --theme-text-tertiary: #b0b0b0;
        
        --theme-border: rgba(255, 255, 255, 0.08);
        --theme-border-hover: rgba(255, 255, 255, 0.12);
    }
}