/* Shared by the React app and every generated page. */
:root {
  --page-width: 1280px;
  --page-gutter: clamp(20px, 3vw, 40px);
  --text-label: 11px;
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  --text-lead: 16px;
  --text-card-title: 20px;
  --text-section: 24px;
  --text-metric: 32px;
  --text-page-title: clamp(32px, 3.5vw, 40px);
  --text-display: clamp(40px, 4.8vw, 64px);
}

/* Appearance roles shared by app and static pages. Brand artwork stays #7D9BFF. */
:root {
  color-scheme: light;
  --wordmark-filter: brightness(0) invert(0.13);
  --theme-paper: 0.000 0.000% 100%;
  --theme-surface: 0.000 0.000% 100.000%;
  --theme-surface-sunken: 240.000 7.143% 94.510%;
  --theme-ink: 240.000 5.882% 13.333%;
  --theme-ink-muted: 240.000 5.143% 34.314%;
  --theme-ink-faint: 240.000 4.673% 41.961%;
  --theme-line: 240.000 8.197% 88.039%;
  --theme-line-strong: 240.000 3.830% 53.922%;
  --theme-accent: 224.272 43.460% 46.471%;
  --theme-accent-deep: 224.348 46.465% 38.824%;
  --theme-accent-bright: 224.272 43.460% 46.471%;
  --theme-accent-wash: 225.882 100.000% 96.667%;
  --theme-accent-soft: 226.000 100.000% 94.118%;
  --theme-accent-highlight: 225.246 85.915% 86.078%;
  --theme-deep: 210.000 11.111% 3.529%;
  --theme-deep-2: 240.000 6.667% 11.765%;
  --theme-on-dark: 180.000 6.667% 97.059%;
  --theme-on-dark-2: 240.000 5.455% 67.647%;
  --theme-status-verified: 145.714 53.846% 28.039%;
  --theme-status-verified-bg: 138.462 39.394% 93.529%;
  --theme-status-observed: 186.061 73.333% 26.471%;
  --theme-status-observed-bg: 183.529 45.946% 92.745%;
  --theme-status-neutral: 240.000 5.143% 34.314%;
  --theme-status-neutral-bg: 240.000 9.091% 93.529%;
  --theme-status-caution: 40.781 100.000% 25.098%;
  --theme-status-caution-bg: 43.902 100.000% 91.961%;
  --theme-status-conflict: 355.161 56.364% 43.137%;
  --theme-status-conflict-bg: 353.333 100.000% 96.471%;
  --theme-action-hover: 240.000 6.349% 24.706%;
  --shadow-float: 0 12px 32px rgb(0 0 0 / 0.10), 0 0 0 1px rgb(0 0 0 / 0.06);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --wordmark-filter: none;
  --theme-paper: 210.000 11.111% 3.529%;
  --theme-surface: 240.000 7.317% 8.039%;
  --theme-surface-sunken: 240.000 7.143% 10.980%;
  --theme-ink: 180.000 6.667% 97.059%;
  --theme-ink-muted: 240.000 5.455% 67.647%;
  --theme-ink-faint: 240.000 4.569% 61.373%;
  --theme-line: 240.000 5.263% 14.902%;
  --theme-line-strong: 240.000 5.263% 26.078%;
  --theme-accent: 226.154 100.000% 74.510%;
  --theme-accent-deep: 228.119 100.000% 80.196%;
  --theme-accent-bright: 226.154 100.000% 74.510%;
  --theme-accent-wash: 225.455 45.205% 14.314%;
  --theme-accent-soft: 222.273 44.000% 19.608%;
  --theme-accent-highlight: 220.000 43.353% 33.922%;
  --theme-deep: 210.000 11.111% 3.529%;
  --theme-deep-2: 240.000 6.667% 11.765%;
  --theme-on-dark: 180.000 6.667% 97.059%;
  --theme-on-dark-2: 240.000 5.455% 67.647%;
  --theme-status-verified: 141.892 69.159% 58.039%;
  --theme-status-verified-bg: 147.500 41.379% 11.373%;
  --theme-status-observed: 186.986 92.405% 69.020%;
  --theme-status-observed-bg: 188.889 41.538% 12.745%;
  --theme-status-neutral: 240.000 4.569% 61.373%;
  --theme-status-neutral-bg: 240.000 5.263% 14.902%;
  --theme-status-caution: 43.256 96.413% 56.275%;
  --theme-status-caution-bg: 40.000 39.130% 13.529%;
  --theme-status-conflict: 0.000 90.604% 70.784%;
  --theme-status-conflict-bg: 357.600 31.646% 15.490%;
  --theme-action-hover: 240.000 8.197% 88.039%;
  --shadow-float: 0 8px 32px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wordmark-filter: none;
  --theme-paper: 210.000 11.111% 3.529%;
  --theme-surface: 240.000 7.317% 8.039%;
  --theme-surface-sunken: 240.000 7.143% 10.980%;
  --theme-ink: 180.000 6.667% 97.059%;
  --theme-ink-muted: 240.000 5.455% 67.647%;
  --theme-ink-faint: 240.000 4.569% 61.373%;
  --theme-line: 240.000 5.263% 14.902%;
  --theme-line-strong: 240.000 5.263% 26.078%;
  --theme-accent: 226.154 100.000% 74.510%;
  --theme-accent-deep: 228.119 100.000% 80.196%;
  --theme-accent-bright: 226.154 100.000% 74.510%;
  --theme-accent-wash: 225.455 45.205% 14.314%;
  --theme-accent-soft: 222.273 44.000% 19.608%;
  --theme-accent-highlight: 220.000 43.353% 33.922%;
  --theme-deep: 210.000 11.111% 3.529%;
  --theme-deep-2: 240.000 6.667% 11.765%;
  --theme-on-dark: 180.000 6.667% 97.059%;
  --theme-on-dark-2: 240.000 5.455% 67.647%;
  --theme-status-verified: 141.892 69.159% 58.039%;
  --theme-status-verified-bg: 147.500 41.379% 11.373%;
  --theme-status-observed: 186.986 92.405% 69.020%;
  --theme-status-observed-bg: 188.889 41.538% 12.745%;
  --theme-status-neutral: 240.000 4.569% 61.373%;
  --theme-status-neutral-bg: 240.000 5.263% 14.902%;
  --theme-status-caution: 43.256 96.413% 56.275%;
  --theme-status-caution-bg: 40.000 39.130% 13.529%;
  --theme-status-conflict: 0.000 90.604% 70.784%;
  --theme-status-conflict-bg: 357.600 31.646% 15.490%;
  --theme-action-hover: 240.000 8.197% 88.039%;
  --shadow-float: 0 8px 32px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.04);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: hsl(var(--theme-ink-muted));
  background: transparent;
  cursor: pointer;
}
.theme-toggle:hover { color: hsl(var(--theme-ink)); background: hsl(var(--theme-surface-sunken)); }
.theme-toggle:focus-visible { outline: 2px solid hsl(var(--theme-accent)); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; stroke-width: 1.5; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }