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

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

:root.theme-default,
:root {
    /* Backgrounds — DS-002 calm/professional light palette */
    --sf-bg-primary: #f1f5f9;      /* cool slate-100 */
    --sf-bg-secondary: #ffffff;
    --sf-bg-light: #f8fafc;        /* slate-50 */
    --sf-bg-hover: #e2e8f0;        /* slate-200 */

    /* Text — deep slate for executive readability */
    --sf-text-primary: #1e293b;    /* slate-800 */
    --sf-text-secondary: #475569;  /* slate-600 */
    --sf-text-muted: #94a3b8;      /* slate-400 */
    --sf-text-heading: #0f172a;    /* slate-900 */

    /* Borders */
    --sf-border-color: #e2e8f0;    /* slate-200 */
    --sf-border-color-hover: #cbd5e1; /* slate-300 */

    /* Semantic accent (maps to primary ocean blue) — DS-001 */
    --sf-accent: var(--sf-primary-600);
    --sf-accent-hover: var(--sf-primary-700);
    --sf-accent-subtle: var(--sf-primary-50);
    --sf-accent-text: #ffffff;
}

/* Respect OS dark mode — unscoped :root fires even before JS sets a class */
@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) {
        --sf-bg-primary: #0f172a;      /* slate-900 */
        --sf-bg-secondary: #1e293b;   /* slate-800 */
        --sf-bg-light: #334155;       /* slate-700 */
        --sf-bg-hover: #475569;       /* slate-600 */

        --sf-text-primary: #f1f5f9;   /* slate-100 */
        --sf-text-secondary: #cbd5e1; /* slate-300 */
        --sf-text-muted: #94a3b8;     /* slate-400 */
        --sf-text-heading: #f8fafc;   /* slate-50 */

        --sf-border-color: #334155;   /* slate-700 */
        --sf-border-color-hover: #475569;

        --sf-accent: var(--sf-primary-400);
        --sf-accent-hover: var(--sf-primary-300);
        --sf-accent-subtle: var(--sf-primary-900);
        --sf-accent-text: #ffffff;
    }

    /* Higher-specificity override for explicit theme-default (same values, keeps cascade clean) */
    :root.theme-default {
        --sf-bg-primary: #0f172a;
        --sf-bg-secondary: #1e293b;
        --sf-bg-light: #334155;
        --sf-bg-hover: #475569;

        --sf-text-primary: #f1f5f9;
        --sf-text-secondary: #cbd5e1;
        --sf-text-muted: #94a3b8;
        --sf-text-heading: #f8fafc;

        --sf-border-color: #334155;
        --sf-border-color-hover: #475569;

        --sf-accent: var(--sf-primary-400);
        --sf-accent-hover: var(--sf-primary-300);
        --sf-accent-subtle: var(--sf-primary-900);
        --sf-accent-text: #ffffff;
    }
}

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

:root.theme-light {
    --sf-bg-primary: #f1f5f9;
    --sf-bg-secondary: #ffffff;
    --sf-bg-light: #f8fafc;
    --sf-bg-hover: #e2e8f0;

    --sf-text-primary: #1e293b;
    --sf-text-secondary: #475569;
    --sf-text-muted: #94a3b8;
    --sf-text-heading: #0f172a;

    --sf-border-color: #e2e8f0;
    --sf-border-color-hover: #cbd5e1;

    --sf-accent: var(--sf-primary-600);
    --sf-accent-hover: var(--sf-primary-700);
    --sf-accent-subtle: var(--sf-primary-50);
    --sf-accent-text: #ffffff;
}

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

:root.theme-dark {
    --sf-bg-primary: #0f172a;      /* slate-900 */
    --sf-bg-secondary: #1e293b;   /* slate-800 */
    --sf-bg-light: #334155;       /* slate-700 */
    --sf-bg-hover: #475569;       /* slate-600 */

    --sf-text-primary: #f1f5f9;   /* slate-100 */
    --sf-text-secondary: #cbd5e1; /* slate-300 */
    --sf-text-muted: #94a3b8;     /* slate-400 */
    --sf-text-heading: #f8fafc;   /* slate-50 */

    --sf-border-color: #334155;   /* slate-700 */
    --sf-border-color-hover: #475569;

    --sf-accent: var(--sf-primary-400);
    --sf-accent-hover: var(--sf-primary-300);
    --sf-accent-subtle: var(--sf-primary-900);
    --sf-accent-text: #ffffff;
}

/* ============================================================================
   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);
}

/* Global modal theming */
.sf-modal-content,
.sf-modal-header,
.sf-modal__header,
.sf-modal-body,
.sf-modal__body,
.sf-modal-footer,
.sf-modal__footer {
    background-color: var(--sf-bg-secondary);
    color: var(--sf-text-primary);
    border-color: var(--sf-border-color);
}

.sf-modal-title,
.sf-modal__title {
    color: var(--sf-text-heading);
}

.sf-modal-body .form-control,
.sf-modal-body .sf-input,
.sf-modal-body .sf-select,
.sf-modal-body .sf-textarea,
.sf-modal__body .form-control,
.sf-modal__body .sf-input,
.sf-modal__body .sf-select,
.sf-modal__body .sf-textarea {
    background-color: var(--sf-bg-primary);
    color: var(--sf-text-primary);
    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;
}