/* ===============================
   DEFAULT THEME — LIGHT MODE
   Background and structural colour variables.
   These are overridden by dark-theme.css when html.dark-mode is active.
   =============================== */

:root {
  /* --- Backgrounds: structural --- */
  --bg-body: #4d4d4d;
  --bg-main: #fefefe;
  --bg-page: #f2f2f2;

  /* --- Backgrounds: sidebar / nav / footer --- */
  --bg-sidebar: #333333;
  --bg-nav-item: rgba(48, 48, 48, 0.6);
  --bg-nav-hover: rgba(54, 54, 54, 0.1);
  --bg-nav-current: #363636;
  --bg-footer: rgba(48, 48, 48, 0.6);

  /* --- Backgrounds: content surfaces --- */
  --bg-card: #fefefe;
  --bg-details: #fafafa;
  --bg-list-item: #fafafa;
  --bg-callout: #f9f5f4;

  /* --- Backgrounds: utility colour classes --- */
  --bg-color-1: #fafafa;
  --bg-color-3: #2c2c2d;
  --bg-color-4: #000000;

  /* --- Text --- */
  --text-body: #333333;
  --text-nav: #cccccc;
  --text-nav-hover: #f7f7f7;
  --text-muted: #8e8e8e;
  --text-color-3: #ffffff;

  /* --- Borders --- */
  --border-section: #cccccc;
  --border-card: #eeeeee;

  /* --- Shadows --- */
  --shadow-card: #cccccc;
  --shadow-dropdown: rgba(0, 0, 0, 0.1);
}

/* ===============================
   ACCENT — RED
   Accent colour variables for this theme.
   Rules applying these variables are in global.css.
   =============================== */

:root {
  --accent: #af473c;
  --accent-hover: #626e60;
  --accent-secondary: #ff7686;
  --accent-text: #ffffff;
}