/* ============================================
   API Manager - Auto Light/Dark Theme
   ============================================ */

/* ============================================
   Light Theme (Default & System Light)
   ============================================ */
:root {
    /* Primary - Soft Blue */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    
    /* Secondary - Soft Teal */
    --secondary: #14b8a6;
    --secondary-light: #2dd4bf;
    --accent: #06b6d4;
    
    /* Status Colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    /* Background - Warm White */
    --bg-primary: #fafaf9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f5f4;
    --bg-card: #ffffff;
    --bg-hover: #e7e5e4;
    
    /* Text - Warm Gray */
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #a8a29e;
    
    /* Border */
    --border-color: #e7e5e4;
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
}

/* ============================================
   Dark Theme (System Dark)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary - Soft Blue */
        --primary: #60a5fa;
        --primary-light: #93c5fd;
        --primary-dark: #3b82f6;
        
        /* Secondary - Soft Teal */
        --secondary: #2dd4bf;
        --secondary-light: #5eead4;
        --accent: #22d3ee;
        
        /* Status Colors */
        --success: #4ade80;
        --warning: #fbbf24;
        --danger: #f87171;
        --info: #60a5fa;
        
        /* Background - Warm Dark */
        --bg-primary: #0c0a09;
        --bg-secondary: #1c1917;
        --bg-tertiary: #292524;
        --bg-card: #1c1917;
        --bg-hover: #44403c;
        
        /* Text - Warm Light */
        --text-primary: #fafaf9;
        --text-secondary: #d6d3d1;
        --text-muted: #a8a29e;
        
        /* Border */
        --border-color: #44403c;
        --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.2);
    }
}

/* ============================================
   Manual Override (via data-theme attribute)
   ============================================ */
[data-theme="light"] {
    /* Primary - Soft Blue */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    
    /* Secondary - Soft Teal */
    --secondary: #14b8a6;
    --secondary-light: #2dd4bf;
    --accent: #06b6d4;
    
    /* Status Colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    /* Background - Warm White */
    --bg-primary: #fafaf9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f5f5f4;
    --bg-card: #ffffff;
    --bg-hover: #e7e5e4;
    
    /* Text - Warm Gray */
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #a8a29e;
    
    /* Border */
    --border-color: #e7e5e4;
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] {
    /* Primary - Soft Blue */
    --primary: #60a5fa;
    --primary-light: #93c5fd;
    --primary-dark: #3b82f6;
    
    /* Secondary - Soft Teal */
    --secondary: #2dd4bf;
    --secondary-light: #5eead4;
    --accent: #22d3ee;
    
    /* Status Colors */
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    
    /* Background - Warm Dark */
    --bg-primary: #0c0a09;
    --bg-secondary: #1c1917;
    --bg-tertiary: #292524;
    --bg-card: #1c1917;
    --bg-hover: #44403c;
    
    /* Text - Warm Light */
    --text-primary: #fafaf9;
    --text-secondary: #d6d3d1;
    --text-muted: #a8a29e;
    
    /* Border */
    --border-color: #44403c;
    --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.2);
}