/* ==========================================
   CSS Variables - Theme System
   SleepEdit built-in design language
   Brand Primary: navy #020f59 → #00449d
   Brand Secondary/Accent: teal #00c2de
   Body Font: "Source Sans Pro"  Heading Font: "Roboto Slab"
   ========================================== */
:root {
    /* Built-in light theme */
    --sidebar-bg: #f5f5f5;
    --sidebar-text: #212529;
    --sidebar-section-label: #616161;
    --sidebar-hover: #eaeaea;
    --sidebar-active-bg: #00449d;
    --sidebar-active-text: #ffffff;

    --main-bg: #ffffff;
    --main-text: #313131;
    --main-text-muted: #616161;

    --card-bg: #ffffff;
    --card-border: #d5d5d5;
    --card-header-bg: #00449d;
    --card-header-text: #ffffff;

    --input-bg: #ffffff;
    --input-border: #bfbfbf;
    --input-text: #313131;
    --input-placeholder: #858585;

    --btn-primary-bg: #00449d;
    --btn-primary-hover: #002c73;
    --btn-primary-text: #ffffff;
    --focus-ring: rgba(0, 68, 157, 0.3);

    --alert-success-bg: #e4fdec;
    --alert-success-text: #0a7d4a;
    --alert-success-border: #9ff2c3;

    --autocomplete-bg: #ffffff;
    --autocomplete-hover: #edf6fc;
    --autocomplete-text: #313131;

    --scrollbar-track: #f5f5f5;
    --scrollbar-thumb: #bfbfbf;

    --link-color: #00449d;
    --link-hover: #0e1d78;
    --accent-cyan: #0096ad;
    --accent-green: #0e9b5b;
    --accent-cyan-bg: rgba(0, 194, 222, 0.12);
    --accent-green-bg: rgba(14, 155, 91, 0.12);
    --protocol-highlight: rgba(0, 194, 222, 0.15);

    --heading-color: #020f59;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #00449d;
    --btn-secondary-border: #00449d;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    --brand-teal: #00c2de;
}

[data-theme="dark"] {
    /* Dark Theme – brand-consistent derived palette */
    --sidebar-bg: #0a1628;
    --sidebar-text: #e5e5e5;
    --sidebar-section-label: #a9a9a9;
    --sidebar-hover: #162240;
    --sidebar-active-bg: #2fabe1;
    --sidebar-active-text: #ffffff;

    --main-bg: #0e1d33;
    --main-text: #e5e5e5;
    --main-text-muted: #a9a9a9;

    --card-bg: #142842;
    --card-border: #2a3f5c;
    --card-header-bg: #002c73;
    --card-header-text: #ffffff;

    --input-bg: #162240;
    --input-border: #2a3f5c;
    --input-text: #e5e5e5;
    --input-placeholder: #858585;

    --btn-primary-bg: #2fabe1;
    --btn-primary-hover: #0092d2;
    --btn-primary-text: #0a1628;
    --focus-ring: rgba(47, 171, 225, 0.35);

    --alert-success-bg: #054f31;
    --alert-success-text: #9ff2c3;
    --alert-success-border: #0a7d4a;

    --autocomplete-bg: #162240;
    --autocomplete-hover: #1f3357;
    --autocomplete-text: #e5e5e5;

    --scrollbar-track: #0e1d33;
    --scrollbar-thumb: #2a3f5c;

    --link-color: #8dc9f7;
    --link-hover: #d7ebf9;
    --accent-cyan: #19ddfa;
    --accent-green: #6ce9a6;
    --accent-cyan-bg: rgba(25, 221, 250, 0.15);
    --accent-green-bg: rgba(108, 233, 166, 0.15);
    --protocol-highlight: rgba(25, 221, 250, 0.18);

    --heading-color: #8dc9f7;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #8dc9f7;
    --btn-secondary-border: #8dc9f7;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    --brand-teal: #19ddfa;
}