/**
 * SODP Portal - Theme System
 * Inspired by Linear.app
 * Version: 3.0.0
 */

/* ========================================
   THEME: DARK (Default)
   Based on Linear.app dark mode
   ======================================== */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-page: #0a0a0b;
    --bg-sidebar: #0f0f11;
    --bg-elevated: #111113;
    --bg-card: #18181b;
    --bg-hover: #1f1f23;
    --bg-active: #27272a;
    --bg-input: #0f0f11;
    
    /* Text */
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --text-muted: #52525b;
    
    /* Borders */
    --border-default: #27272a;
    --border-hover: #3f3f46;
    --border-subtle: #1f1f23;
    
    /* Accent - SLT Green */
    --accent: #00c389;
    --accent-hover: #00d99a;
    --accent-muted: rgba(0, 195, 137, 0.15);
    --accent-glow: rgba(0, 195, 137, 0.4);
    
    /* Secondary Accent - Purple */
    --accent-secondary: #8b5cf6;
    --accent-secondary-muted: rgba(139, 92, 246, 0.15);
    
    /* Brand Colors (backward compat) */
    --slt-green: #00c389;
    --bg-secondary: #18181b;
    --bg-tertiary: #111113;
    
    /* Status */
    --status-success: #22c55e;
    --status-warning: #eab308;
    --status-error: #ef4444;
    --status-info: #3b82f6;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ========================================
   THEME: LIGHT
   Clean light mode
   ======================================== */
[data-theme="light"] {
    /* Backgrounds */
    --bg-page: #f8f8f8;
    --bg-sidebar: #ffffff;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f3f3f3;
    --bg-active: #e8e8e8;
    --bg-input: #ffffff;
    
    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #525252;
    --text-tertiary: #737373;
    --text-muted: #a3a3a3;
    
    /* Borders */
    --border-default: #e5e5e5;
    --border-hover: #d4d4d4;
    --border-subtle: #f0f0f0;
    
    /* Accent - SLT Green */
    --accent: #00a875;
    --accent-hover: #00b981;
    --accent-muted: rgba(0, 168, 117, 0.1);
    --accent-glow: rgba(0, 168, 117, 0.3);
    
    /* Secondary Accent - Purple */
    --accent-secondary: #7c3aed;
    --accent-secondary-muted: rgba(124, 58, 237, 0.1);
    
    /* Brand Colors (backward compat) */
    --slt-green: #00a875;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f3f3;
    
    /* Status */
    --status-success: #16a34a;
    --status-warning: #ca8a04;
    --status-error: #dc2626;
    --status-info: #2563eb;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ========================================
   THEME: TOKYO NIGHT
   Purple/pink aesthetic
   ======================================== */
[data-theme="tokyo-night"] {
    /* Backgrounds */
    --bg-page: #1a1b26;
    --bg-sidebar: #16161e;
    --bg-elevated: #1f202e;
    --bg-card: #24283b;
    --bg-hover: #2f3549;
    --bg-active: #3b4261;
    --bg-input: #1a1b26;
    
    /* Text */
    --text-primary: #c0caf5;
    --text-secondary: #9aa5ce;
    --text-tertiary: #565f89;
    --text-muted: #414868;
    
    /* Borders */
    --border-default: #292e42;
    --border-hover: #3b4261;
    --border-subtle: #232433;
    
    /* Accent - Pink/Purple */
    --accent: #bb9af7;
    --accent-hover: #c4a7f7;
    --accent-muted: rgba(187, 154, 247, 0.15);
    --accent-glow: rgba(187, 154, 247, 0.4);
    
    /* Secondary Accent - Blue */
    --accent-secondary: #7aa2f7;
    --accent-secondary-muted: rgba(122, 162, 247, 0.15);
    
    /* Brand Colors (backward compat) */
    --slt-green: #9ece6a;
    --bg-secondary: #24283b;
    --bg-tertiary: #1f202e;
    
    /* Status */
    --status-success: #9ece6a;
    --status-warning: #e0af68;
    --status-error: #f7768e;
    --status-info: #7dcfff;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ========================================
   THEME: DESERT (Warm/Sandy)
   Amber/warm tones
   ======================================== */
[data-theme="desert"] {
    /* Backgrounds */
    --bg-page: #1c1917;
    --bg-sidebar: #171412;
    --bg-elevated: #211d1a;
    --bg-card: #292524;
    --bg-hover: #37322e;
    --bg-active: #44403c;
    --bg-input: #1c1917;
    
    /* Text */
    --text-primary: #fafaf9;
    --text-secondary: #d6d3d1;
    --text-tertiary: #a8a29e;
    --text-muted: #78716c;
    
    /* Borders */
    --border-default: #3f3a36;
    --border-hover: #57534e;
    --border-subtle: #2d2926;
    
    /* Accent - Amber */
    --accent: #f59e0b;
    --accent-hover: #fbbf24;
    --accent-muted: rgba(245, 158, 11, 0.15);
    --accent-glow: rgba(245, 158, 11, 0.4);
    
    /* Secondary Accent - Orange-Red */
    --accent-secondary: #f97316;
    --accent-secondary-muted: rgba(249, 115, 22, 0.15);
    
    /* Brand Colors (backward compat) */
    --slt-green: #f59e0b;
    --bg-secondary: #292524;
    --bg-tertiary: #211d1a;
    
    /* Status */
    --status-success: #84cc16;
    --status-warning: #fbbf24;
    --status-error: #ef4444;
    --status-info: #38bdf8;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ========================================
   THEME TRANSITION
   ======================================== */
body,
.sidebar,
.main-content,
.card,
.btn {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}