/* ============================================================================
   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 */
    --sf-white: #ffffff;           /* literal-white surface token — see dark-mode-audit.md */

    /* Text — deep slate for executive readability */
    --sf-text-primary: #1e293b;    /* slate-800 */
    --sf-text-secondary: #475569;  /* slate-600 */
    /* slate-500, not slate-400 (#94a3b8). On a white surface slate-400 measures 2.56:1 — well
       under the 4.5:1 body-text minimum — and this token has ~390 references, including
       .sf-page-subtitle on every page. slate-500 clears it at 4.76:1 while still reading as
       clearly de-emphasised next to --sf-text-secondary (7.58:1). The dark blocks keep
       slate-400, which is already 5.71:1 against the dark surface. */
    --sf-text-muted: #64748b;      /* slate-500 */
    --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;

    /* Shorthand aliases referenced across many component stylesheets but never
       previously defined anywhere — they always fell back to hardcoded light-mode
       values (or nothing at all) regardless of theme. Defined once here as live
       references so they automatically track whichever theme block above is active
       (see dark-mode-audit.md). */
    --sf-text: var(--sf-text-primary);
    --sf-text-dark: var(--sf-text-heading);
    --sf-border: var(--sf-border-color);
    --sf-border-light: var(--sf-border-color);
    --sf-surface: var(--sf-bg-secondary);
    --sf-surface-secondary: var(--sf-bg-light);
    --sf-primary-blue: var(--sf-accent);

    /* Second batch of the same problem (audited 2026-08-10): referenced across
       ~60 declarations but never defined, so the light-mode hex fallback won in
       every theme — and where the reference had no fallback at all
       (EmptyLayout.razor.css:94, Search.razor.css:693, MilestoneDetail.razor.css:144)
       the declaration was simply invalid. */
    --sf-primary: var(--sf-accent);
    --sf-primary-blue-light: var(--sf-primary-400);
    --sf-bg-base: var(--sf-bg-light);
    --sf-border-default: var(--sf-border-color);
    --rr-text-primary: var(--sf-text-primary);

    /* Third batch of the same problem (audited 2026-08-11): the bare semantic names are
       referenced ~102 times across component stylesheets but were never defined, so every
       one of those declarations was invalid at computed-value time and silently dropped —
       taking the whole declaration with it (e.g. WorkoutPlanner's completed-workout chip
       lost its background entirely rather than falling back to the base chip colour).
       Each maps to the 500 step, which is the one rung that stays legible both as text on
       a page surface and as a fill behind white text. */
    --sf-success: var(--sf-success-500);
    --sf-warning: var(--sf-warning-500);
    --sf-danger: var(--sf-error-500);
    --sf-info: var(--sf-info-500);
    --sf-surface-dim: var(--sf-bg-hover);

    /* Card surface alias (audited 2026-08-11). Referenced by ~12 component stylesheets —
       ReleaseNotes, TaskDetail, InquiryList/Detail, LifeTimeline, DailyControlPanel,
       CourseNoteList/Export, AiLearningSummary, AdaptiveWorkoutCard,
       UnresolvedCaptureInbox, AlertPreferencesSettings — but never defined, so every one
       fell back to its literal (usually #fff) and rendered a white card on a dark page,
       often with near-white text on top. Same surface as --sf-surface; kept as its own
       name because that many call sites already use it. Like the other aliases this is a
       live reference, so it must NOT be repeated in the per-theme blocks below — it
       already tracks whichever --sf-bg-secondary is active. */
    --sf-card-bg: var(--sf-bg-secondary);

    /* Same story, 6 references (audited 2026-08-11): the recessed/secondary surface used
       for inset lists and sub-panels. Every call site falls back to #f8fafc, which is
       exactly --sf-bg-light in light mode, so mapping it there keeps light identical and
       gives dark a surface that actually flips. */
    --sf-surface-alt: var(--sf-bg-light);

    /* Same story for the bare radius alias: 23 of its 44 references have no fallback, so
       those elements lost their rounding entirely (WorkoutPlanner's list rows, set badges
       and calendar cells all rendered square). 0.5rem is what the other references already
       fall back to most often, and matches --sf-radius-lg. */
    --sf-radius: var(--sf-radius-lg);

    /* Subtle primary wash for selected/active cards. Deliberately an alpha colour
       rather than a ramp step: it composites over whatever surface is beneath it,
       so it reads correctly in every theme without per-theme overrides. */
    --sf-primary-tint: rgba(59, 130, 246, 0.08);

    /* Brand purple. Paired with --sf-primary-blue in the brand gradients
       (Footer, Search, MilestoneDetail). No purple ramp exists, so this carries a
       literal value and is lightened in the dark blocks below. */
    --sf-primary-purple: #7c3aed;

    /* Status colour for TEXT. The success and warning ramps in 01-variables.css declare
       "lighter" dark values that are byte-identical to the light ones, so no step of
       those ramps is theme-aware — and no single step clears 4.5:1 on both white and
       slate-800 (step 600, #16a34a, is only 3.3:1 on white).
       This follows the --sf-accent idiom: a darker step for light, lighter for dark. */
    --sf-success-text: var(--sf-success-700);

    /* Link/accent colour for TEXT on a page surface. --sf-accent resolves to
       --sf-primary-600 (#0284c7) in light, which is only 4.1:1 on white and fails AA for
       body-sized text. One step darker clears it at 5.8:1; dark mode keeps the lighter
       step it already used. Use --sf-accent for fills/borders, this for text. */
    --sf-link-text: var(--sf-primary-700);

    /* Link hover. A step darker again in light (7.4:1) so hover stays visibly distinct
       from the resting colour. Must be a token, not --sf-primary-800 directly: the dark
       blocks in 01-variables.css only lighten steps 400–600, so 700/800 stay dark in both
       themes and are unusable as text on a dark surface. */
    --sf-link-text-hover: var(--sf-primary-800);
}

/* 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-white: #1e293b;          /* was never redefined for dark — see dark-mode-audit.md */

        --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;

        --sf-primary-purple: #a78bfa;
        --sf-success-text: var(--sf-success-400);
        --sf-link-text: var(--sf-primary-400);
        --sf-link-text-hover: var(--sf-primary-200);
    }

    /* 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-white: #1e293b;

        --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;

        --sf-primary-purple: #a78bfa;
        --sf-success-text: var(--sf-success-400);
        --sf-link-text: var(--sf-primary-400);
        --sf-link-text-hover: var(--sf-primary-200);
    }
}

/* ============================================================================
   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-white: #ffffff;

    --sf-text-primary: #1e293b;
    --sf-text-secondary: #475569;
    --sf-text-muted: #64748b;  /* slate-500 — see the :root block for why not slate-400 */
    --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-white: #1e293b;

    --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;

    --sf-primary-purple: #a78bfa;
    --sf-success-text: var(--sf-success-400);
    --sf-link-text: var(--sf-primary-400);
    --sf-link-text-hover: var(--sf-primary-200);
}

/* ============================================================================
   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-white: #FFFFFF;
    
    --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;
}