/*---------------------------------*
 * Theme variables & dark variants *
 *---------------------------------*/
:root {
  --bg-alt: #ffffff;
  --bg-accent: #e6edf5;
  --text: #000000;
  --text-dim: #4d5a67;
  --header: #2366b8;
  --header-alt: #1b4f8d;
  --border: #c8d6e5;
  --highlight: #ffffff;
  --row-fade-color: rgba(0, 59, 121, 0.6);

  /* Common colors */
  --white: #ffffff;
  --black: #000000;

  /* Light mode blue gradient palette */
  --blue-1: #4f85c4; /* light */
  --blue-2: #2366b8; /* mid */
  --blue-3: #1b4f8d; /* dark */

  /* Background overlays */
  --bg-overlay-main: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2)
  );
  --bg-nav-gradient: linear-gradient(180deg, #ffffff 0%, #a5c2e0 100%);
}

:root.dark {
  --bg-alt: #24272b;
  --bg-accent: #2d3035;
  --text: #ffffff;
  --text-dim: #a8adb5;
  --header: #cfa93a;
  --header-alt: #9d7d22;
  --border: #3a3f45;
  --highlight: #494f55;
  --row-fade-color: rgba(255, 255, 255, 0.32);

  /* Common colors (same in dark mode) */
  --white: #ffffff;
  --black: #000000;

  /* Dark mode gold gradient palette */
  --gold-1: #f2d777; /* light */
  --gold-2: #cfa93a; /* mid */
  --gold-3: #9d7d22; /* dark */

  /* Background overlays */
  --bg-overlay-main: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.6)
  );
  --bg-nav-gradient: linear-gradient(180deg, #2f3236 0%, #181818 100%);
}

/*--------------*
 * Theme toggle *
 *--------------*/
.theme-toggle {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  z-index: 500;
}
.theme-toggle button {
  width: 36px;
  height: 36px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.theme-toggle button.active {
  background: var(--header);
  color: var(--white);
  border-color: var(--header-alt);
  cursor: default;
}
.theme-toggle button:not(.active):hover {
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  transform: translateY(-2px);
  background: var(--header-alt);
  color: var(--white);
}
:root.dark .theme-toggle button {
  background: var(--bg-accent);
}
:root.dark .theme-toggle button.active {
  background: var(--header);
  color: var(--black);
  border-color: var(--header-alt);
}
:root.dark .theme-toggle button:not(.active):hover {
  background: var(--header-alt);
  color: var(--white);
}
.theme-toggle button.active:hover {
  transform: none;
}

/*--------------------------*
 * Scrollbars (theme aware) *
 *--------------------------*/
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-alt);
}
::-webkit-scrollbar-thumb {
  background: var(--header);
  border-radius: 5px;
  transition: 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--header-alt);
}
* {
  scrollbar-color: var(--header) var(--bg-alt);
  scrollbar-width: thin;
}