/* static/css/theme.css */

:root {
    /* =========================================
       Light Theme Variables (SaaS Default)
       ========================================= */
    /* Backgrounds */
    --bg-body: #f8fafc;        /* App background */
    --bg-card: #ffffff;        /* Cards, modals, topbar */
    --bg-sidebar: #ffffff;     /* Sidebar background */
    
    /* Interactive Backgrounds */
    --bg-hover: #f1f5f9;       /* General hover state */
    --bg-active: #e2e8f0;      /* Active/Pressed state */
    --bg-nav-active: #eff6ff;  /* Active nav item */
    
    /* Text Colors */
    --text-primary: #0f172a;   /* Headings, main text */
    --text-secondary: #475569; /* Subtitles, general text */
    --text-muted: #64748b;     /* Captions, placeholders, inactive nav */
    --text-nav-active: #1d4ed8;/* Active nav text */
    --text-nav-hover: #0f172a; /* Nav text on hover */
    
    /* Borders & Dividers */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    
    /* Accents & Brand */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-danger: #ef4444;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar {
    /* =========================================
       Dark Theme Variables (SaaS Dark Mode)
       ========================================= */
    /* Backgrounds */
    --bg-body: #0f172a;        /* Deep blue/black background */
    --bg-card: #1e293b;        /* Slightly lighter for cards/topbar */
    --bg-sidebar: #1e293b;     /* Sidebar background */
    
    /* Interactive Backgrounds */
    --bg-hover: #334155;       /* Hover state */
    --bg-active: #475569;      /* Active state */
    --bg-nav-active: rgba(59, 130, 246, 0.15); /* Semi-transparent blue for active nav */
    
    /* Text Colors */
    --text-primary: #f8fafc;   /* White text for dark mode */
    --text-secondary: #cbd5e1; /* Light gray text */
    --text-muted: #94a3b8;     /* Muted gray text */
    --text-nav-active: #60a5fa;/* Light blue for active nav */
    --text-nav-hover: #f8fafc; /* Nav text on hover */
    
    /* Borders & Dividers */
    --border-color: #334155;
    --border-light: #1e293b;
    
    /* Accents & Brand (Adjusted for dark mode contrast) */
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-danger: #f87171;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    
    /* Shadows (Darker shadows for dark mode) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Global Transitions for Smooth Theme Toggling
   ========================================= */
body, 
.content-card, 
.data-block, 
.dashboard-section,
p, h1, h2, h3, h4, h5, h6, span {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}