:root {
  color-scheme: light;
  --page-background: #f2f3f5;
  --surface-background: #fff;
  --primary-text: #292c31;
  --muted-text: #686d75;
  --surface-border: #dfe1e5;
  --tag-background: #eef0f2;
  --tag-text: #4d525a;
  --ink: #292c31;
  --muted: #686d75;
  --paper: #f2f3f5;
  --card: #fff;
  --navy: #3d424a;
  --accent: #626973;
  --green: #626973;
  --blue: #626973;
  --theme-accent: #626973;
  --theme-accent-dark: #c5cad1;
  --highlight: #d9dce1;
  --mint: #d9dce1;
  --orange: #626973;
  --cyan: #d9dce1;
  --line: #dfe1e5;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-background: #1b1d21;
  --surface-background: #272a30;
  --primary-text: #e6e8eb;
  --muted-text: #b0b4bb;
  --surface-border: #41454d;
  --tag-background: #34383f;
  --tag-text: #d4d7dc;
  --ink: #292c31;
  --muted: #b0b4bb;
  --paper: #1b1d21;
  --card: #272a30;
  --navy: #292c31;
  --accent: #b9bec6;
  --green: #b9bec6;
  --blue: #b9bec6;
  --theme-accent: #b9bec6;
  --theme-accent-dark: #c5cad1;
  --highlight: #d9dce1;
  --mint: #d9dce1;
  --orange: #b9bec6;
  --cyan: #d9dce1;
  --line: #41454d;
}

body {
  color: var(--primary-text) !important;
  background: var(--page-background) !important;
}

h1,
h2,
h3,
.brand,
.logo {
  color: var(--primary-text);
}

.eyebrow,
h1 span,
h1 em,
h2,
h3,
.panel strong {
  color: var(--theme-accent, var(--primary-text));
}

.intro,
.lead,
.heading p,
.card p,
.panel p,
.item p,
nav ul,
footer {
  color: var(--muted-text);
}

.card,
.panel,
.item,
.timeline-item,
.skill-card {
  border-color: var(--surface-border);
  background: var(--surface-background);
}

.tag {
  color: var(--tag-text);
  background: var(--tag-background);
}

.date {
  color: var(--theme-accent) !important;
}

.visual::before,
.visual::after {
  border-color: #ffffff38 !important;
}

.initials {
  border-color: var(--surface-border) !important;
  color: var(--navy) !important;
  background: var(--tag-background) !important;
}

:root[data-theme="dark"] .initials {
  border-color: #d9dce1 !important;
  color: #292c31 !important;
  background: #d9dce1 !important;
}

.contact p {
  color: #d4d7dc !important;
}

.theme-toggle {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--surface-background);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: currentColor;
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--theme-accent, #5368a8);
  outline-offset: 3px;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .item,
:root[data-theme="dark"] .timeline-item,
:root[data-theme="dark"] .skill-card {
  border-color: var(--surface-border);
  background: var(--surface-background);
}

:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h1 span,
:root[data-theme="dark"] h1 em,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .date,
:root[data-theme="dark"] .panel strong,
:root[data-theme="dark"] .card a,
:root[data-theme="dark"] .button.alt {
  color: var(--theme-accent-dark) !important;
}

:root[data-theme="dark"] .contact h2 {
  color: #fff !important;
}

:root[data-theme="dark"] .card {
  box-shadow: 0 18px 50px #0005;
}

:root[data-theme="dark"] .button:not(.alt),
:root[data-theme="dark"] .brand b,
:root[data-theme="dark"] .mark {
  color: #292c31 !important;
}