/* Site theme: palette as CSS variables (RGB channels, so Tailwind's `/opacity` modifiers keep working).
   site-theme.js maps the Tailwind colors onto these; `.dark` on <html> swaps them.
   Identical copy in static/smartarzt and static/atlas-ai: keep both in sync. */

/* Light values. Also re-applied inside the sections that are dark by design (hero, code blocks),
   so their light-on-dark text keeps its colors in dark mode too. */
:root,
.dark [class*="bg-[#0a0a0a]"],
.dark [class*="bg-[#0d1117]"],
.dark [class*="bg-[#161b22]"] {
  --c-surface: 255 255 255;
  --c-ink: 26 28 33;
  --c-gray-50: 249 250 251;
  --c-gray-100: 243 244 246;
  --c-gray-200: 229 231 235;
  --c-gray-300: 209 213 219;
  --c-gray-400: 156 163 175;
  --c-gray-500: 107 114 128;
  --c-gray-600: 75 85 99;
  --c-gray-700: 55 65 81;
  --c-gray-800: 31 41 55;
  --c-gray-900: 17 24 39;
  --c-gray-950: 3 7 18;
  --c-blue-50: 230 247 249;
}

/* Dark values: surface = cards and sections, the gray scale flips (50 = darkest), ink = headings */
.dark {
  color-scheme: dark;
  --c-surface: 23 28 35;
  --c-ink: 238 240 243;
  --c-gray-50: 18 22 28;
  --c-gray-100: 13 17 22;
  --c-gray-200: 38 44 53;
  --c-gray-300: 53 60 71;
  --c-gray-400: 107 115 128;
  --c-gray-500: 139 147 160;
  --c-gray-600: 168 175 186;
  --c-gray-700: 197 203 211;
  --c-gray-800: 221 225 231;
  --c-gray-900: 238 240 243;
  --c-gray-950: 247 248 250;
  --c-blue-50: 11 42 46;
}

.dark body {
  background-color: rgb(var(--c-surface));
  color: rgb(var(--c-gray-900));
}

/* Set in each page's own <style> block as plain white */
.dark .mobile-menu-panel {
  background-color: rgb(var(--c-surface));
}

/* Partner logos and the ISO seal are dark artwork or sit on white: show them on a light plate
   instead of recoloring them */
.dark img[src*="ebody-logo"],
.dark img[src*="better.care-logo"],
.dark img[src*="max-grundig-klinik-logo"],
.dark img[src*="vidavo-logo"],
.dark img[src*="iso27001-mark"] {
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
}

/* Brand logo: pages carry a light and a dark <img>; show the one for the active theme */
.logo-dark { display: none; }
.dark .logo-light { display: none; }
.dark .logo-dark { display: block; }

/* Theme menu (System / Light / Dark), inserted into the nav by site-theme.js */
.theme-toggle { position: relative; display: inline-flex; }
.theme-toggle-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 9999px;
  color: rgb(var(--c-gray-600)); background: transparent; border: 0; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.theme-toggle-button:hover,
.theme-toggle-button[aria-expanded="true"] {
  background-color: rgb(var(--c-gray-100)); color: rgb(var(--c-gray-900));
}
.theme-toggle svg,
.theme-menu svg { width: 1rem; height: 1rem; flex-shrink: 0; }
/* Position (top + left/right) is set by site-theme.js when it opens */
.theme-menu {
  position: fixed; z-index: 1000; min-width: 150px; padding: 0.25rem;
  border: 1px solid rgb(var(--c-gray-200)); border-radius: 0.75rem;
  background-color: rgb(var(--c-surface)); box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
}
.theme-menu[hidden] { display: none; }
.theme-option {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.375rem 0.75rem;
  border: 0; border-radius: 0.5rem; background: transparent; cursor: pointer; text-align: left;
  font-size: 0.875rem; color: rgb(var(--c-gray-700));
}
.theme-option:hover { background-color: rgb(var(--c-gray-50)); }
.theme-option[aria-pressed="true"] {
  background-color: rgb(var(--c-blue-50)); color: #008999; font-weight: 500;
}
.dark .theme-option[aria-pressed="true"] { color: #4cc9d6; }
.theme-option .theme-option-label { flex: 1; }
.theme-option .theme-option-check { width: 0.875rem; height: 0.875rem; }