/* 
   THEMES 
*/

[data-theme="obsidian"] {
    /* Uses base variables from app.css */
}

/* 2. Midnight Emerald (Tech/Code) */
[data-theme="emerald"] {
    --color-bg-base: #020617; 
    --color-bg-body: #064e3b; 
    --color-bg-elevated: #065f46;
    --color-bg-surface: #047857;
    --color-text-primary: #ecfdf5;
    --color-primary: #10b981;
    --color-primary-light: #34d399;
    --color-primary-dark: #059669;
    --color-accent: #34d399;
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* 3. Arctic Ice (Corporate / Clean Dark) */
[data-theme="arctic"] {
    --color-bg-base: #0f172a; 
    --color-bg-body: #1e293b; 
    --color-bg-elevated: #334155; 
    --color-bg-surface: #475569;
    --color-text-primary: #f8fafc;
    --color-primary: #0ea5e9; 
    --color-primary-light: #38bdf8;
    --color-primary-dark: #0284c7;
    --color-accent: #38bdf8;
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
}

/* 4. Crimson Forge (Gaming-Style) */
[data-theme="crimson"] {
    --color-bg-base: #18181b; 
    --color-bg-body: #27272a; 
    --color-bg-elevated: #3f3f46;
    --color-bg-surface: #52525b;
    --color-text-primary: #f4f4f5;
    --color-primary: #ef4444; 
    --color-primary-light: #f87171;
    --color-primary-dark: #b91c1c;
    --color-accent: #f87171;
    --gradient-primary: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

/* 5. Sunset Amber (Warm / Cozy) */
[data-theme="amber"] {
    --color-bg-base: #1c1917; 
    --color-bg-body: #292524;
    --color-bg-elevated: #44403c;
    --color-bg-surface: #57534e;
    --color-text-primary: #fafaf9;
    --color-primary: #f59e0b; 
    --color-primary-light: #fbbf24;
    --color-primary-dark: #d97706;
    --color-accent: #fbbf24;
    --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* 6. Neon Synthwave (Cyberpunk) */
[data-theme="synthwave"] {
    --color-bg-base: #170d2b; 
    --color-bg-body: #231545;
    --color-bg-elevated: #2f1d5e;
    --color-bg-surface: #3a2272;
    --color-text-primary: #ff79c6;
    --color-primary: #ff007f; 
    --color-primary-light: #ff3399;
    --color-primary-dark: #cc0066;
    --color-accent: #00e5ff; 
    --gradient-primary: linear-gradient(135deg, #ff007f 0%, #7928ca 100%);
}

/* 7. Polaris Light (Helles Theme) */
[data-theme="polaris"] {
    --color-bg-base: #f1f5f9;
    --color-bg-body: #ffffff;
    --color-bg-elevated: #e2e8f0;
    --color-bg-surface: #ffffff;
    --color-text-primary: #0f172a; 
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --color-primary: #3b82f6; 
    --color-primary-light: #60a5fa;
    --color-primary-dark: #2563eb;
    --color-accent: #60a5fa;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --gradient-hero: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.7) 100%);
    --color-border: #cbd5e1;
}

/* 8. Monochrom Minimalist */
[data-theme="monochrom"] {
    --color-bg-base: #000000;
    --color-bg-body: #111111;
    --color-bg-elevated: #222222;
    --color-bg-surface: #333333;
    --color-text-primary: #ffffff;
    --color-primary: #ffffff;
    --color-primary-light: #eeeeee;
    --color-primary-dark: #cccccc;
    --color-accent: #bbbbbb;
    --gradient-primary: linear-gradient(135deg, #555555 0%, #222222 100%);
    --gradient-card: linear-gradient(145deg, rgba(34,34,34,0.95) 0%, rgba(17,17,17,0.7) 100%);
}

/* 9. Gold & Royal */
[data-theme="royal"] {
    --color-bg-base: #0b1120;
    --color-bg-body: #121b2d;
    --color-bg-elevated: #1a263d;
    --color-bg-surface: #1e3a5f;
    --color-text-primary: #ffffff;
    --color-primary: #fbbf24;
    --color-primary-light: #fcd34d;
    --color-primary-dark: #f59e0b;
    --color-accent: #fcd34d;
    --gradient-primary: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

/* 10. Material Horizon */
[data-theme="material"] {
    --color-bg-base: #1e1b4b;
    --color-bg-body: #2e1065;
    --color-bg-elevated: #4c1d95;
    --color-bg-surface: #5b21b6;
    --color-text-primary: #ddd6fe;
    --color-primary: #8b5cf6;
    --color-primary-light: #a78bfa;
    --color-primary-dark: #7c3aed;
    --color-accent: #a78bfa;
    --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    --gradient-card: linear-gradient(145deg, rgba(76,29,149,0.95) 0%, rgba(46,16,101,0.7) 100%);
}

/* 
   LAYOUTS
*/

/* 1. Classic Full-Height (Default) */
/* No overrides needed */

/* 2. Unified Top Navbar (SaaS-Style) */
[data-layout="topnav"] .sidebar {
    display: none !important;
}
[data-layout="topnav"] .main-content {
    margin-left: 0 !important;
}
[data-layout="topnav"] .app-header-left .sidebar-toggle-btn {
    display: none !important;
}

/* 3. Floating Island Sidebar */
[data-layout="floating"] .sidebar {
    height: calc(100vh - 40px);
    margin: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: var(--color-bg-elevated);
}
[data-layout="floating"] .main-content {
    margin-left: 300px;
}
[data-layout="floating"] .app-header {
    border-radius: 0 0 20px 20px;
    margin: 0 20px 20px 20px;
    width: calc(100% - 40px);
}
[data-layout="floating"] .content {
    padding: 20px;
}

/* 4. Framed Window Layout (macOS Style) */
[data-layout="framed"] {
    background-color: var(--color-bg-base);
    display: flex;
    justify-content: center;
    align-items: center;
}
[data-layout="framed"] .page {
    max-width: 1400px;
    width: 100%;
    margin: 2vw auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
}
[data-layout="framed"] .sidebar {
    position: absolute;
}
[data-layout="framed"] .app-header {
    width: 100%;
}