/* ===============================
   DARK THEME
   Overrides structural colour variables when html.dark-mode is active.
   The html.dark-mode class is toggled by JS and persisted in localStorage.
   Accent/brand colours (--accent etc.) are unchanged — they remain readable
   against dark surfaces and do not need per-mode overrides.
   =============================== */

html.dark-mode {
    /* --- Backgrounds: structural --- */
    --bg-body:          #121212;
    --bg-main:          #1e1e1e;
    --bg-page:          #252525;

    /* --- Backgrounds: sidebar / nav / footer --- */
    --bg-sidebar:       #111111;
    --bg-nav-item:      rgba(15, 15, 15, 0.85);
    --bg-nav-hover:     rgba(255, 255, 255, 0.06);
    --bg-nav-current:   #1c1c1c;
    --bg-footer:        rgba(10, 10, 10, 0.85);
    --bg-pageheader:    #111111;

    /* --- Backgrounds: content surfaces --- */
    --bg-card:          #333333;
    --bg-card-assets:   #2a2a2a;
    --bg-details:       #2a2a2a;
    --bg-list-item:     #2a2a2a;
    --bg-callout:       #2a2526;
    --bg-login-form:    #2a2a2a;

    /* --- Backgrounds: utility colour classes --- */
    --bg-color-1:       #222222;
    --bg-color-2:       #252525;
    --bg-color-3:       #111111;
    --bg-color-4:       #050505;

    /* --- Text --- */
    --text-body:        #d0d0d0;
    --text-heading:     #cccccc;
    --text-nav:         #888888;
    --text-nav-hover:   #e0e0e0;
    --text-muted:       #666666;
    --text-color-3:     #cccccc;

    /* --- Borders --- */
    --border-section:   #444444;
    --border-card:      #3a3a3a;
    --border-price:     #3a3a3a;

    /* --- Shadows --- */
    --shadow-card:      rgba(0, 0, 0, 0.25);
    --shadow-dropdown:  rgba(255, 255, 255, 0.12);
}