/* ============================================================================
   THEME SYSTEM - PROFILE-02
   Support for Default/Light/Dark themes with immediate application
   ============================================================================ */

/* ============================================================================
   1. DEFAULT THEME (Matches OS Preference)
   ============================================================================ */

:root.theme-default,
:root {
    --sf-bg-primary: #F4F7FB;
    --sf-bg-secondary: #FFFFFF;
    --sf-bg-light: #F9FAFB;
    --sf-bg-hover: #EEF2F6;
    
    --sf-text-primary: #1F2937;
    --sf-text-secondary: #6B7280;
    --sf-text-muted: #9CA3AF;
    --sf-text-heading: #111827;
    
    --sf-border-color: #E5E7EB;
    --sf-border-color-hover: #D1D5DB;
}

/* Respect OS dark mode when theme-default */
@media (prefers-color-scheme: dark) {
    :root.theme-default {
        --sf-bg-primary: #111827;
        --sf-bg-secondary: #1F2937;
        --sf-bg-light: #374151;
        --sf-bg-hover: #4B5563;
        
        --sf-text-primary: #F9FAFB;
        --sf-text-secondary: #D1D5DB;
        --sf-text-muted: #9CA3AF;
        --sf-text-heading: #FFFFFF;
        
        --sf-border-color: #374151;
        --sf-border-color-hover: #4B5563;
    }
}

/* ============================================================================
   2. LIGHT THEME (Force Light)
   ============================================================================ */

:root.theme-light {
    --sf-bg-primary: #F4F7FB;
    --sf-bg-secondary: #FFFFFF;
    --sf-bg-light: #F9FAFB;
    --sf-bg-hover: #EEF2F6;
    
    --sf-text-primary: #1F2937;
    --sf-text-secondary: #6B7280;
    --sf-text-muted: #9CA3AF;
    --sf-text-heading: #111827;
    
    --sf-border-color: #E5E7EB;
    --sf-border-color-hover: #D1D5DB;
}

/* ============================================================================
   3. DARK THEME (Force Dark)
   ============================================================================ */

:root.theme-dark {
    --sf-bg-primary: #111827;
    --sf-bg-secondary: #1F2937;
    --sf-bg-light: #374151;
    --sf-bg-hover: #4B5563;
    
    --sf-text-primary: #F9FAFB;
    --sf-text-secondary: #D1D5DB;
    --sf-text-muted: #9CA3AF;
    --sf-text-heading: #FFFFFF;
    
    --sf-border-color: #374151;
    --sf-border-color-hover: #4B5563;
}

/* ============================================================================
   4. THEME APPLICATION
   ============================================================================ */

/* Page Background */
body {
    background-color: var(--sf-bg-primary);
    color: var(--sf-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card Backgrounds */
.sf-card,
.sf-modal-content,
.sf-page-container {
  /*  background-color: var(--sf-bg-secondary);*/
    border-color: var(--sf-border-color);
}

/* Text Colors */
.sf-text-primary {
    color: var(--sf-text-primary);
}

.sf-text-secondary {
    color: var(--sf-text-secondary);
}

.sf-text-muted {
    color: var(--sf-text-muted);
}

.sf-page-title,
.sf-card-title,
h1, h2, h3, h4, h5, h6 {
    color: var(--sf-text-heading);
}

/* Borders */
.sf-card,
.sf-input,
.sf-select,
.sf-textarea {
    border-color: var(--sf-border-color);
}

.sf-input:hover,
.sf-select:hover,
.sf-textarea:hover {
    border-color: var(--sf-border-color-hover);
}

/* Hover States */
.sf-btn-ghost:hover,
.sf-btn-outline:hover {
    background-color: var(--sf-bg-hover);
}

/* Executive Mode: High-density professional styling (SF-UI-001) */
:root.theme-executive {
    --sf-bg-primary: #F8F9FA;
    --sf-bg-secondary: #FFFFFF;
    --sf-bg-light: #F1F3F5;
    --sf-bg-hover: #E9ECEF;
    
    --sf-text-primary: #212529;
    --sf-text-secondary: #495057;
    --sf-text-muted: #6C757D;
    --sf-text-heading: #000000;
    
    --sf-border-color: #DEE2E6;
    --sf-border-color-hover: #CED4DA;
    
    /* Reduce padding for density */
    --sf-space-1: 0.125rem;
    --sf-space-2: 0.25rem;
    --sf-space-3: 0.5rem;
    --sf-space-4: 0.75rem;
    --sf-space-6: 1rem;
    --sf-space-8: 1.5rem;
}

/* ============================================================================
   5. THEME PERSISTENCE LOADER (PROFILE-02)
   Load theme from localStorage on app start
   ============================================================================ */

/* Prevent flash of unstyled content (FOUC) */
html {
    transition: none;
}

html.theme-loading {
    visibility: hidden;
}