/* Shared theme variables + dark/light/system switcher — used by every page on the site */

:root {
  --bg: #f7f5f0;
  --text: #1a1a18;
  --text-muted: #6b6b66;
  --text-faint: #888780;
  --text-dim: #a8a59e;
  --card-bg: #fff;
  --border: #e0ddd6;
  --border-soft: #f0ede6;
  --panel-bg: #f7f5f0;
  --contacts-bg: #f0ede6;
  --header-bg: #1a1a18;
  --header-text: #fff;
  --header-label: #a8a59e;

  --chip-local-bg: #e8e4dc; --chip-local-text: #3d3a32;
  --chip-arrives-bg: #d4eaff; --chip-arrives-text: #1a4a7a;
  --chip-tbd-bg: #ede8ff; --chip-tbd-text: #3a1a7a;

  --badge-metro-bg: #1a4a7a; --badge-metro-text: #b5d4f4;
  --badge-drive-bg: #4a3200; --badge-drive-text: #fac775;
  --badge-logistics-bg: #4a1a1a; --badge-logistics-text: #f7c1c1;

  --link-bg: #e8f4ff; --link-border: #b5d4f4; --link-text: #1a4a7a; --link-bg-hover: #d4eaff;

  --note-warn-bg: #fff4d9; --note-warn-text: #7a4a00;
  --note-info-bg: #e8f4ff; --note-info-text: #1a4a7a;
  --note-book-bg: #ffe8e8; --note-book-text: #7a1a1a;

  --confirmed: #1baf7a;
  --backup: #ba7517;
  --option-text: #4a4a46;
  --option-border: #e8e5de;

  --pending-bg: #fff8ec; --pending-border: #fac775;
  --pending-title: #7a4a00; --pending-text: #4a3200;

  --daymap-bg: #eae7df;

  --yes-bg: #e1f6ec; --yes-text: #0d7a4d;
  --maybe-bg: #fff4d9; --maybe-text: #7a4a00;
  --no-bg: #f0ede6; --no-text: #6b6b66;
}

[data-theme="dark"] {
  --bg: #161512;
  --text: #ece9e2;
  --text-muted: #a8a59e;
  --text-faint: #85827a;
  --text-dim: #6f6c65;
  --card-bg: #201f1a;
  --border: #34322b;
  --border-soft: #29281f;
  --panel-bg: #1c1b16;
  --contacts-bg: #201f1a;
  --header-bg: #0c0b09;
  --header-text: #f5f3ee;
  --header-label: #8f8c84;

  --chip-local-bg: #3a3830; --chip-local-text: #d8d4c8;
  --chip-arrives-bg: #1c3a52; --chip-arrives-text: #a8d4ff;
  --chip-tbd-bg: #2e2445; --chip-tbd-text: #c9b8ff;

  --badge-metro-bg: #163a5c; --badge-metro-text: #8fc3f5;
  --badge-drive-bg: #3a2800; --badge-drive-text: #f5c065;
  --badge-logistics-bg: #3a1414; --badge-logistics-text: #f5a3a3;

  --link-bg: #163049; --link-border: #2a5a82; --link-text: #7ec1ff; --link-bg-hover: #1d3f5e;

  --note-warn-bg: #3a2e0d; --note-warn-text: #f0c264;
  --note-info-bg: #163049; --note-info-text: #7ec1ff;
  --note-book-bg: #3a1717; --note-book-text: #f29d9d;

  --confirmed: #3ad999;
  --backup: #e0a64a;
  --option-text: #c7c4bb;
  --option-border: #322f27;

  --pending-bg: #2a2410; --pending-border: #8a6a1f;
  --pending-title: #f0c975; --pending-text: #e8d9ab;

  --daymap-bg: #201f1a;

  --yes-bg: #123a29; --yes-text: #3ad999;
  --maybe-bg: #3a2e0d; --maybe-text: #f0c264;
  --no-bg: #29281f; --no-text: #85827a;
}

/* Theme switcher — fixed sun/moon/system control, expands on hover */
.theme-switcher {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
}

.theme-switcher-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: var(--text);
  position: relative;
  z-index: 2;
}

.theme-switcher-btn svg { width: 19px; height: 19px; }
.theme-switcher-btn .icon-moon,
.theme-switcher-btn .icon-system { display: none; }

html[data-theme="dark"] .theme-switcher-btn .icon-sun { display: none; }
html[data-theme="dark"] .theme-switcher-btn .icon-moon { display: block; }

html[data-theme-mode="system"] .theme-switcher-btn .icon-sun,
html[data-theme-mode="system"] .theme-switcher-btn .icon-moon { display: none; }
html[data-theme-mode="system"] .theme-switcher-btn .icon-system { display: block; }

.theme-switcher-menu {
  position: absolute;
  top: 48px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.theme-switcher.open .theme-switcher-menu,
.theme-switcher:focus-within .theme-switcher-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.theme-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.theme-option svg { width: 17px; height: 17px; }
.theme-option:hover { background: var(--panel-bg); color: var(--text); }
.theme-option.active { background: var(--link-bg); color: var(--link-text); }