/* ===============================
   DARK THEME
   Background overrides applied when html.dark-mode is active.
   The html.dark-mode class is toggled by JS and persisted in localStorage.
   =============================== */

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

  /* --- Backgrounds: sidebar / nav / footer --- */
  --bg-sidebar: #1a1a1a;
  --bg-nav-item: rgba(24, 24, 24, 0.85);
  --bg-nav-hover: rgba(255, 255, 255, 0.06);
  --bg-nav-current: #1c1c1c;
  --bg-footer: rgba(19, 19, 19, 0.85);

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

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

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

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

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