/* ============================================================
   Apartments Veronika — Theme System
   Three themes: light | gray | dark (OLED)
   Brand accent: #8068FE
   ============================================================ */

/* ── LIGHT THEME ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg:              #FAFAF8;
  --bg-alt:          #F4F3EF;
  --surface:         #FFFFFF;
  --surface2:        #F0EEF9;
  --surface3:        #E8E5F8;
  --text:            #1A1825;
  --text2:           #4A4760;
  --text3:           #8B88A0;
  --accent:          #8068FE;
  --accent-hover:    #6A52E8;
  --accent-light:    rgba(128, 104, 254, 0.10);
  --accent-mid:      rgba(128, 104, 254, 0.20);
  --border:          rgba(128, 104, 254, 0.14);
  --border-soft:     rgba(26, 24, 37, 0.08);
  --divider:         rgba(26, 24, 37, 0.06);
  --shadow-sm:       0 2px 8px rgba(26, 24, 37, 0.06);
  --shadow-md:       0 8px 32px rgba(26, 24, 37, 0.10);
  --shadow-lg:       0 24px 64px rgba(26, 24, 37, 0.14);
  --shadow-accent:   0 8px 32px rgba(128, 104, 254, 0.20);
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-heavy:  rgba(255, 255, 255, 0.82);
  --glass-blur:      20px;
  --glass-border:    rgba(255, 255, 255, 0.80);
  --success:         #2ECC71;
  --success-bg:      rgba(46, 204, 113, 0.10);
  --error:           #E53E3E;
  --error-bg:        rgba(229, 62, 62, 0.10);
  --warning:         #F6AD55;
  --warning-bg:      rgba(246, 173, 85, 0.10);
  --info:            #8068FE;
  --info-bg:         rgba(128, 104, 254, 0.10);
  --overlay:         rgba(26, 24, 37, 0.50);
  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       28px;
  --radius-pill:     999px;
  color-scheme: light;
}

/* ── GRAY THEME (soft dark) ──────────────────────────────── */
[data-theme="gray"] {
  --bg:              #18181B;
  --bg-alt:          #141417;
  --surface:         #232329;
  --surface2:        #2D2D35;
  --surface3:        #38383F;
  --text:            #F0EFF5;
  --text2:           #B8B6CC;
  --text3:           #78768A;
  --accent:          #9480FF;
  --accent-hover:    #A897FF;
  --accent-light:    rgba(148, 128, 255, 0.12);
  --accent-mid:      rgba(148, 128, 255, 0.24);
  --border:          rgba(148, 128, 255, 0.18);
  --border-soft:     rgba(240, 239, 245, 0.08);
  --divider:         rgba(240, 239, 245, 0.06);
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md:       0 8px 32px rgba(0, 0, 0, 0.36);
  --shadow-lg:       0 24px 64px rgba(0, 0, 0, 0.48);
  --shadow-accent:   0 8px 32px rgba(148, 128, 255, 0.24);
  --glass-bg:        rgba(35, 35, 41, 0.70);
  --glass-bg-heavy:  rgba(35, 35, 41, 0.90);
  --glass-blur:      22px;
  --glass-border:    rgba(255, 255, 255, 0.08);
  --success:         #4ADE80;
  --success-bg:      rgba(74, 222, 128, 0.12);
  --error:           #FC8181;
  --error-bg:        rgba(252, 129, 129, 0.12);
  --warning:         #F6AD55;
  --warning-bg:      rgba(246, 173, 85, 0.12);
  --info:            #9480FF;
  --info-bg:         rgba(148, 128, 255, 0.12);
  --overlay:         rgba(0, 0, 0, 0.65);
  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       28px;
  --radius-pill:     999px;
  color-scheme: dark;
}

/* ── DARK THEME (OLED — pure black) ─────────────────────── */
[data-theme="dark"] {
  --bg:              #000000;
  --bg-alt:          #050505;
  --surface:         #0C0C0E;
  --surface2:        #141416;
  --surface3:        #1C1C1F;
  --text:            #F5F4FF;
  --text2:           #B0AEC8;
  --text3:           #68667A;
  --accent:          #9A82FF;
  --accent-hover:    #B09AFF;
  --accent-light:    rgba(154, 130, 255, 0.10);
  --accent-mid:      rgba(154, 130, 255, 0.20);
  --border:          rgba(154, 130, 255, 0.16);
  --border-soft:     rgba(245, 244, 255, 0.06);
  --divider:         rgba(245, 244, 255, 0.04);
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-md:       0 8px 32px rgba(0, 0, 0, 0.60);
  --shadow-lg:       0 24px 64px rgba(0, 0, 0, 0.80);
  --shadow-accent:   0 8px 32px rgba(154, 130, 255, 0.20);
  --glass-bg:        rgba(12, 12, 14, 0.75);
  --glass-bg-heavy:  rgba(12, 12, 14, 0.95);
  --glass-blur:      24px;
  --glass-border:    rgba(255, 255, 255, 0.05);
  --success:         #4ADE80;
  --success-bg:      rgba(74, 222, 128, 0.10);
  --error:           #FC8181;
  --error-bg:        rgba(252, 129, 129, 0.10);
  --warning:         #F6AD55;
  --warning-bg:      rgba(246, 173, 85, 0.10);
  --info:            #9A82FF;
  --info-bg:         rgba(154, 130, 255, 0.10);
  --overlay:         rgba(0, 0, 0, 0.80);
  --radius-sm:       6px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       28px;
  --radius-pill:     999px;
  color-scheme: dark;
}

/* ── THEME TRANSITION ────────────────────────────────────── */
/* Smooth theme switching — only applies after page load */
html.theme-ready *,
html.theme-ready *::before,
html.theme-ready *::after {
  transition:
    background-color 0.30s ease,
    border-color     0.30s ease,
    color            0.30s ease,
    box-shadow       0.30s ease;
}

/* Exceptions — never transition these */
html.theme-ready img,
html.theme-ready video,
html.theme-ready canvas,
html.theme-ready .no-theme-transition {
  transition: none !important;
}