/* Kompatibilitätsrollen für noch nicht vollständig umgestellte Detailscreens. */
:root,
[data-theme="light"] {
  --bg: var(--page);
  --bg-deep: var(--page);
  --panel: var(--card);
  --panel2: var(--page);
  --panel3: var(--border);
  --muted: var(--text-2);
  --border-strong: var(--border);
  --brand: var(--text);
  --brand-hover: var(--text-2);
  --brand-fill: var(--accent);
  --brand-fill-hover: var(--accent);
  --brand-ink: var(--card);
  --brand-blue: var(--accent);
  --accent-strong: var(--accent);
  --accent2: var(--accent-light);
  --primary: var(--accent);
  --success: var(--text-2);
  --success-text: var(--text-2);
  --success-soft: var(--page);
  --success-border: var(--border);
  --warning: var(--warning-color);
  --warning-text: var(--warning-color);
  --warning-soft: var(--warning-bg);
  --warning-border: var(--warning-color);
  --danger: var(--error-color);
  --danger-text: var(--error-color);
  --danger-soft: var(--error-bg);
  --danger-border: var(--error-color);
  --good: var(--text-2);
  --cyan: var(--accent);
  --card2: var(--page);
  --os-ink: var(--text);
  --os-dim: var(--text-2);
  --os-muted: var(--text-2);
  --os-line: var(--border);
  --os-accent: var(--accent);
  --os-rose: var(--accent);
  --wash-muted: color-mix(in srgb, var(--text-2) 4%, transparent);
  --wash-brand: color-mix(in srgb, var(--accent) 10%, transparent);
  --scrim: color-mix(in srgb, var(--text) 28%, transparent);
  --scrim-strong: color-mix(in srgb, var(--text) 65%, transparent);
  --focus-halo: color-mix(in srgb, var(--accent) 36%, transparent);
  --chart-grid: color-mix(in srgb, var(--text-3) 16%, transparent);
  --brand-line: color-mix(in srgb, var(--accent) 15%, transparent);
  --mask-opaque: var(--card);
  --sleep-deep: var(--accent);
  --sleep-core: var(--accent-mid);
  --sleep-rem: var(--accent-light);
  --sleep-unspecified: var(--border);
  --font-body: var(--font-system);
  --font-display: var(--font-system);
  --font-wordmark: var(--font-system);
  color-scheme: light;
  font-family: var(--font-system);
}

html,
body {
  color: var(--text);
  background: var(--page);
  font-family: var(--font-system);
  /* Fester Zeilenabstand für alles, was keinen eigenen hat (tokens.css, «Zeilenabstand»). */
  line-height: var(--line-height-text);
}

body input,
body select,
body textarea,
body button {
  font-family: inherit;
}

/* Felder bekommen vom Browser «normal»; Knöpfe erben über «font: inherit» (styles.css) den Wert ihrer Umgebung. */
body input,
body select,
body textarea {
  line-height: var(--line-height-control);
}

body ::selection {
  color: var(--text);
  background: var(--accent-light);
}

body button:focus-visible,
body a:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible,
body #muscle-map [tabindex]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: var(--space-1);
}

/* Seitenbereiche, die den Fokus erhalten (z. B. nach Sprungmarken), zeigen ihn innen, damit nichts abgeschnitten wird. */
body .page:focus-visible,
body .main:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: calc(var(--space-1) * -1);
}

body a,
body .text-button,
body .source-link {
  color: var(--text);
}

body a:hover,
body .text-button:hover {
  color: var(--text-2);
}

body .primary {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
  font-weight: var(--font-weight-medium);
}

body .primary:hover,
body .primary:active {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

body .secondary {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}

body .secondary:hover {
  color: var(--text);
  background: var(--page);
  border-color: var(--border);
}

body input,
body select,
body textarea {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
  color-scheme: inherit; /* hell oder dunkel wie die Seite (css/dark.css) */
}

body input::placeholder,
body textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}

body input[type="checkbox"],
body input[type="radio"] {
  accent-color: var(--accent);
}

body button:disabled {
  cursor: not-allowed;
}

body .bo-icon {
  stroke-width: 1.7;
}

.ui-shell-enabled .app {
  background: var(--page);
}

.ui-shell-enabled .main {
  scrollbar-color: var(--border) transparent;
}

.os-pause-banner {
  color: var(--warning-text);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.os-pause-banner small {
  color: inherit;
}

.ui-shell-enabled .card,
.ui-shell-enabled .surface,
.os-focus-card,
body .surface-feature,
body .surface-featured,
body .insight-score,
body .insight-method {
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
}

body .count-badge,
body .empty-state-mark {
  color: var(--text-2);
  background: var(--page);
  border-color: var(--border);
}

body .icon-button {
  color: var(--text);
  background: var(--page);
}

body .icon-button:hover {
  background: var(--page);
  border-color: var(--border);
}

.ui-shell-enabled .profile-actions {
  background: var(--page);
  border-color: var(--border);
}

body .os-dialog {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
  box-shadow: none;
  color-scheme: inherit;
}

body dialog::backdrop {
  background: var(--scrim);
  backdrop-filter: none;
}

body .sync-conflict-card {
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.sleep-metric-cards article {
  background: var(--card);
  border-color: var(--border);
}

.sleep-phase-deep {
  background: var(--sleep-deep);
}

.sleep-phase-core {
  background: var(--sleep-core);
}

.sleep-phase-rem {
  background: var(--sleep-rem);
}

.sleep-phase-unspecified,
.sleep-phase-awake {
  background: var(--sleep-unspecified);
}

.sleep-status {
  color: var(--text-2);
}

.sleep-error {
  color: var(--error-color);
}

body #sleepExperience input,
body #sleepExperience select,
body #sleepExperience textarea {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
}

.training-exercise-picker {
  background: var(--card);
  border-color: var(--border);
}

.exercise-muscle-filters button {
  color: var(--text-2);
  border-color: var(--border);
}

.exercise-results-head {
  color: var(--text);
}

.exercise-result {
  color: var(--text);
  background: var(--page);
  border-color: var(--border);
}

.exercise-result:hover,
.exercise-result.is-current {
  background: var(--page);
  border-color: var(--text-2);
}

.exercise-result small {
  color: var(--text-2);
}

body .metric-progress-track,
body .nutrition-progress,
.nut-week-bar {
  background: var(--border);
}

body .metric-progress-track > i,
body .nutrition-progress > div,
.nut-week-bar > div,
body .nut-week-bar > div.over {
  background: var(--accent);
  box-shadow: none;
}

.nutrition-stat,
.nutrition-food {
  min-width: 0;
}

.nutrition-food {
  max-width: 100%;
}

.nutrition-food > * {
  min-width: 0;
}

.nutrition-food-macros {
  display: contents;
}

.nutrition-macro-label {
  display: none;
}

.nutrition-food-kcal,
.nutrition-meal-total,
.nutrition-stat {
  font-variant-numeric: tabular-nums;
}

.nutrition-delete {
  min-height: var(--control-height);
  color: var(--text-2);
}

.nutrition-delete:hover {
  color: var(--error-color);
  background: var(--error-bg);
  border-radius: var(--radius-button);
}

.nut-meal-toolbar > * {
  min-width: 0;
}

.nut-meal-toolbar button {
  flex-shrink: 0;
}

.os-kicker,
.surface-kicker,
.eyebrow {
  color: var(--text-3);
  font-family: var(--font-system);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

.ui-shell-enabled .header h1,
#muscle-map .mm-heading h1 {
  font-family: var(--font-system);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}