:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #17202a;
  --text-body: #354052;
  --text-subtle: #3f4a5a;
  --muted: #5c6674;
  --line: #dfe3e8;
  --accent: #b42318;
  --accent-dark: #8f1d14;
  --accent-soft: #fff1f0;
  --accent-border: #fecdca;
  --blue: #175cd3;
  --blue-soft: #eff8ff;
  --info: #175cd3;
  --info-soft: #eff8ff;
  --info-border: #b2ddff;
  --green: #067647;
  --green-soft: #ecfdf3;
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --warning: #93370d;
  --warning-soft: #fffaeb;
  --warning-border: #fedf89;
  --elevated: #f2f4f7;
  --elevated-alt: #f8fafc;
  --header-bg: rgba(255, 255, 255, 0.94);
  --header-border: rgba(223, 227, 232, 0.9);
  --shadow-sm: 0 12px 40px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 16px 40px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 18px 50px rgba(16, 24, 40, 0.08);
  --hero-bg:
    radial-gradient(circle at 85% 15%, rgba(180, 35, 24, 0.09), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --inverse-surface: #101828;
  --inverse-text: #ffffff;
  --inverse-muted: #d0d5dd;
  --media-bg: #111111;
  --overlay-bg: rgba(23, 32, 42, 0.88);
  --on-accent: #ffffff;
  --on-media: #ffffff;
  --theme-color-meta: #ffffff;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101820;
  --surface: #1a2332;
  --text: #e8eaed;
  --text-body: #c5cdd6;
  --text-subtle: #b0b8c4;
  --muted: #9aa3af;
  --line: #2d3a4d;
  --accent: #e85d4c;
  --accent-dark: #b42318;
  --accent-soft: #2d1a18;
  --accent-border: #5c2f28;
  --blue: #6ba3ff;
  --blue-soft: #1a2840;
  --info: #6ba3ff;
  --info-soft: #1a2840;
  --info-border: #2d4f7a;
  --green: #47d18a;
  --green-soft: #152820;
  --ok: #47d18a;
  --ok-soft: #152820;
  --warning: #f0b429;
  --warning-soft: #2a2210;
  --warning-border: #5c4a1a;
  --elevated: #222d3d;
  --elevated-alt: #1e2838;
  --header-bg: rgba(26, 35, 50, 0.95);
  --header-border: rgba(45, 58, 77, 0.9);
  --shadow-sm: 0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.32);
  --hero-bg:
    radial-gradient(circle at 85% 15%, rgba(232, 93, 76, 0.14), transparent 26%),
    linear-gradient(180deg, #1a2332 0%, #101820 100%);
  --inverse-surface: #243044;
  --inverse-text: #e8eaed;
  --inverse-muted: #b0b8c4;
  --media-bg: #0a0e14;
  --overlay-bg: rgba(0, 0, 0, 0.72);
  --on-accent: #ffffff;
  --on-media: #ffffff;
  --theme-color-meta: #101820;
}

.brand-logo.brand-logo--dark {
  display: none;
}

[data-theme="dark"] .brand-logo.brand-logo--light {
  display: none;
}

[data-theme="dark"] .brand-logo.brand-logo--dark {
  display: block;
}

.theme-toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--elevated);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.theme-toggle__icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.theme-toggle__icon--sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--sun {
  display: block;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}