/* Theme variables for light and dark modes */
:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-text: #111418;
  --color-muted: #6c757d;
  --color-primary: #1f50dc;
  --color-primary-contrast: #ffffff;

  /* Navbar */
  --navbar-bg: rgba(255, 255, 255, 0.9);
  --navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
  --navbar-text: #111418;
  --navbar-text-active: var(--color-primary);
  --navbar-border: rgba(0, 0, 0, 0.05);
  --dropdown-bg: #ffffff;
  --dropdown-border: #e9ecef;
  --dropdown-text: #212529;
  --dropdown-hover-bg: var(--color-primary);
  --dropdown-hover-text: #ffffff;
  --hamburger-border: #111418;
  --hamburger-focus: rgba(17, 20, 24, 0.25);
}

:root[data-theme="dark"] {
  --color-bg: #0f1011;
  --color-text: #f8f9fa;
  --color-muted: #adb5bd;
  --color-primary: #1f50dc;
  --color-primary-contrast: #ffffff;

  /* Navbar */
  --navbar-bg: rgba(15, 16, 17, 0.95);
  --navbar-bg-scrolled: rgba(15, 16, 17, 0.98);
  --navbar-text: #ffffff;
  --navbar-text-active: var(--color-primary);
  --navbar-border: rgba(255, 255, 255, 0.08);
  --dropdown-bg: #161616;
  --dropdown-border: #343a40;
  --dropdown-text: #ffffff;
  --dropdown-hover-bg: var(--color-primary);
  --dropdown-hover-text: #ffffff;
  --hamburger-border: #ffffff;
  --hamburger-focus: rgba(255, 255, 255, 0.25);
}

/* Override Bootstrap/Bootswatch theme colors */
[data-bs-theme="light"] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #111418;
  --bs-primary: #1f50dc;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0f1011;
  --bs-body-color: #f8f9fa;
  --bs-primary: #1f50dc;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}

/* Additional theme variables for pages */
:root[data-theme="light"] {
  --page-bg: #ffffff;
  --page-text: #111418;
  --page-text-muted: #6c757d;
  --card-bg: #f8f9fa;
  --card-border: #e9ecef;
  --card-hover-bg: #e9ecef;
  --header-bg: #f8f9fa;
  --header-text: #111418;
  --accent-color: #4bbf73;
  --accent-hover: #3da862;

  /* Footer colors */
  --footer-bg: #2c3e50;
  --footer-text: #ffffff;
  --footer-text-muted: rgba(255, 255, 255, 0.7);

  /* Header colors */
  --header-bg-start: #1f50dc;
  --header-bg-end: #4bbf73;
  --header-overlay: rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] {
  --page-bg: #0f1011;
  --page-text: #f8f9fa;
  --page-text-muted: #adb5bd;
  --card-bg: #161616;
  --card-border: #262626;
  --card-hover-bg: #1a1a1a;
  --header-bg: #0f1011;
  --header-text: #ffffff;
  --accent-color: #4bbf73;
  --accent-hover: #3da862;

  /* Footer colors */
  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;
  --footer-text-muted: rgba(255, 255, 255, 0.7);

  /* Header colors */
  --header-bg-start: #1f50dc;
  --header-bg-end: #4bbf73;
  --header-overlay: rgba(0, 0, 0, 0.3);
}

/* Base */
html,
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Utility to hide FOUC before theme is applied */
html[data-theme-unset] body {
  visibility: hidden;
}