/* ─────────────────────────────────────────────────────────────
   HLPER colour modes: Dark and Dark Blue.
   Light mode is just main.css with nothing added.

   nav.js sets <html data-theme="dark"> or "dark-blue" on the
   logged-in pages (dashboard, plans, tools, account). Public pages
   always stay light. Each mode only swaps colour variables, so every
   page that uses main.css's variables follows automatically.
   ───────────────────────────────────────────────────────────── */

html[data-theme="dark"] {
  --t-bg: #121321;
  --t-surface: #1c1e30;
  --t-text: #c9cad9;
  --t-heading: #eef0ff;
  --t-border: #2e3048;
  --t-muted: #9a9cb3;
}

html[data-theme="dark-blue"] {
  --t-bg: #0b1730;
  --t-surface: #132447;
  --t-text: #c3d0e8;
  --t-heading: #f1f5ff;
  --t-border: #243a66;
  --t-muted: #8ea2c6;
}

html[data-theme="dark-red"] {
  --t-bg: #1c0f12;
  --t-surface: #2a161b;
  --t-text: #e0c9cd;
  --t-heading: #fff0f2;
  --t-border: #47262d;
  --t-muted: #b3949a;
  --t-accent: #cc5c74;          /* deep rose: purple turns muddy on dark red */
  --t-accent-hover: #f0a3b1;
  --t-accent-soft: rgba(204, 92, 116, 0.24);
}

html[data-theme="dark-green"] {
  --t-bg: #0d1a14;
  --t-surface: #15291f;
  --t-text: #c6dccf;
  --t-heading: #effaf3;
  --t-border: #24422f;
  --t-muted: #93b09f;
  --t-accent: #2a9266;          /* emerald */
  --t-accent-hover: #8fe0b6;
  --t-accent-soft: rgba(42, 146, 102, 0.28);
}

/* ── Shared by all the dark modes ── */
html[data-theme] {
  color-scheme: dark;   /* dark scrollbars, date pickers and dropdowns */

  /* main.css variables */
  --background-color: var(--t-bg);
  --surface-color: var(--t-surface);
  --default-color: var(--t-text);
  --heading-color: var(--t-heading);
  --contrast-color: #ffffff;
  --accent-color: var(--t-accent, #a55aab);   /* HLPER purple, lifted so it stands out (Dark Red and Dark Green set their own) */
  --nav-color: var(--t-text);
  --nav-hover-color: var(--t-accent-hover, #d9a6dc);
  --nav-mobile-background-color: var(--t-surface);
  --nav-dropdown-background-color: var(--t-surface);
  --nav-dropdown-color: var(--t-text);
  --nav-dropdown-hover-color: var(--t-accent-hover, #d9a6dc);

  /* variables used by the plan, practice, tool and account pages */
  --bg: var(--t-bg);
  --border: var(--t-border);
  --mid: var(--t-muted);
  --accent-light: var(--t-accent-soft, rgba(165, 90, 171, 0.22));
}

html[data-theme] body,
html[data-theme] .light-background {
  --background-color: var(--t-bg);
  --surface-color: var(--t-surface);
  background-color: var(--t-bg);
}

/* Header: the template turns it white once you scroll */
html[data-theme] .scrolled .header,
html[data-theme] .index-page.scrolled .header { --background-color: var(--t-bg); }
html[data-theme] .header .header-container { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.45); }

/* Homepage: the FAQ section mixes in a fixed light grey, which would show as a pale band */
html[data-theme] .faq { background-color: var(--t-bg); }

/* Softer shadows read as dirty on dark backgrounds */
html[data-theme] .dash-card,
html[data-theme] .dash-panel,
html[data-theme] .sub-card { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35); }

/* ── Status colours that were written for light backgrounds ── */
html[data-theme] .sub-banner.ok   { color: #8fe0b6; }
html[data-theme] .sub-banner.warn { color: #f3c27a; }
html[data-theme] .sub-banner.bad  { color: #ff9aa5; }
html[data-theme] .sub-status.ok   { color: #6fd9a2; }
html[data-theme] .sub-status.warn { color: #f0b45c; }
html[data-theme] .sub-status.bad  { color: #ff8d99; }
html[data-theme] .dash-btn-danger-outline,
html[data-theme] .dash-btn-danger-outline:hover { color: #ff8d99; }
html[data-theme] .dash-deadline.soon strong { color: #f0b45c; }
html[data-theme] .dash-deadline.overdue strong,
html[data-theme] .dash-deadline.overdue i { color: #ff8d99; }

html[data-theme] .form-error,
html[data-theme] .danger-zone-title { color: #ff8d99; }

/* Practice: right / wrong answers */
html[data-theme] .blank-box.correct,
html[data-theme] .mc-option.correct { color: #7fdcaa; }
html[data-theme] .btn-still-learning:hover { color: #f0b45c; border-color: #f0b45c; }

/* ── Dashboard count boxes (All / Due / Expired) ──
   Light mode keeps the flat purple, green and amber from dashboard.html.
   The dark modes use deeper colours with a gentle gradient so they don't glare,
   and a faint edge so they still stand out from the background. */
html[data-theme] .dash-stat { border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); }
html[data-theme] .dash-stat .icon { color: rgba(255, 255, 255, 0.12); }
html[data-theme] .dash-stat-footer { background: rgba(0, 0, 0, 0.2); }
html[data-theme] .dash-stat-footer:hover { background: rgba(0, 0, 0, 0.32); }

/* Dark: the same purple, green and amber, deepened */
html[data-theme="dark"] .dash-stat.is-all     { background: linear-gradient(135deg, #7d3f84 0%, #552a5b 100%); }
html[data-theme="dark"] .dash-stat.is-due     { background: linear-gradient(135deg, #17805b 0%, #0d573d 100%); }
html[data-theme="dark"] .dash-stat.is-expired { background: linear-gradient(135deg, #a85d18 0%, #743f10 100%); }

/* Dark Blue: violet, teal and copper, which sit better on navy than green and orange */
html[data-theme="dark-blue"] .dash-stat.is-all     { background: linear-gradient(135deg, #6b4ba8 0%, #452f7a 100%); }
html[data-theme="dark-blue"] .dash-stat.is-due     { background: linear-gradient(135deg, #17807f 0%, #0e5860 100%); }
html[data-theme="dark-blue"] .dash-stat.is-expired { background: linear-gradient(135deg, #b0663a 0%, #7d4322 100%); }

/* Dark Red: rose, green and amber */
html[data-theme="dark-red"] .dash-stat.is-all     { background: linear-gradient(135deg, #a8425a 0%, #6e2436 100%); }
html[data-theme="dark-red"] .dash-stat.is-due     { background: linear-gradient(135deg, #1f7a55 0%, #11513a 100%); }
html[data-theme="dark-red"] .dash-stat.is-expired { background: linear-gradient(135deg, #b0661c 0%, #764010 100%); }

/* Dark Green: emerald, ocean blue and amber */
html[data-theme="dark-green"] .dash-stat.is-all     { background: linear-gradient(135deg, #22805a 0%, #13543a 100%); }
html[data-theme="dark-green"] .dash-stat.is-due     { background: linear-gradient(135deg, #22708c 0%, #134a5e 100%); }
html[data-theme="dark-green"] .dash-stat.is-expired { background: linear-gradient(135deg, #a8691e 0%, #734511 100%); }