:root {
  --seb-dark-bg: #0f172a;
  --seb-dark-surface: #111827;
  --seb-dark-elevated: #1e293b;
  --seb-dark-border: #1f2937;
  --seb-dark-text: #e2e8f0;
  --seb-dark-muted: #94a3b8;
  --seb-dark-accent: #38bdf8;
  --seb-dark-accent-strong: #0ea5e9;
  --seb-dark-highlight: #facc15;
}

html[data-theme="dark"],
html.theme-dark {
  color-scheme: dark;
}

html[data-theme="dark"] body,
html.theme-dark body {
  background-color: var(--seb-dark-bg);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] a,
html.theme-dark a {
  color: var(--seb-dark-accent);
}

html[data-theme="dark"] a:hover,
html.theme-dark a:hover {
  color: var(--seb-dark-accent-strong);
}

html[data-theme="dark"] .site-title a,
html.theme-dark .site-title a {
  background: var(--seb-dark-surface);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .site-title a:hover,
html.theme-dark .site-title a:hover {
  background: var(--seb-dark-elevated);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .button-square,
html.theme-dark .button-square {
  background: var(--seb-dark-surface);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .button-square:hover,
html.theme-dark .button-square:hover {
  background: var(--seb-dark-elevated);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .theme-toggle,
html.theme-dark .theme-toggle {
  box-shadow: none;
}

html[data-theme="dark"] .site-nav-item a,
html.theme-dark .site-nav-item a {
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .site-nav-item a:hover,
html.theme-dark .site-nav-item a:hover {
  color: var(--seb-dark-accent);
}

html[data-theme="dark"] .post-header,
html.theme-dark .post-header {
  border-bottom-color: var(--seb-dark-border);
}

html[data-theme="dark"] .post-line:after,
html.theme-dark .post-line:after {
  border-bottom-color: var(--seb-dark-border);
}

html[data-theme="dark"] .post-date,
html[data-theme="dark"] .post-reading,
html[data-theme="dark"] .blog-description,
html[data-theme="dark"] .post-tags,
html[data-theme="dark"] .share,
html.theme-dark .post-date,
html.theme-dark .post-reading,
html.theme-dark .blog-description,
html.theme-dark .post-tags,
html.theme-dark .share {
  color: var(--seb-dark-muted);
}

html[data-theme="dark"] .post-tags a:hover,
html.theme-dark .post-tags a:hover {
  color: var(--seb-dark-accent);
}

html[data-theme="dark"] .post-stub,
html.theme-dark .post-stub {
  border-bottom-color: var(--seb-dark-border);
}

html[data-theme="dark"] .post-stub a,
html.theme-dark .post-stub a {
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .post-stub a:hover,
html.theme-dark .post-stub a:hover {
  background: rgba(30, 41, 59, 0.8);
  color: var(--seb-dark-accent);
}

html[data-theme="dark"] .post-stub-tag,
html.theme-dark .post-stub-tag {
  background: var(--seb-dark-elevated);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] blockquote,
html.theme-dark blockquote {
  border-color: var(--seb-dark-border);
}

html[data-theme="dark"] blockquote p,
html.theme-dark blockquote p {
  color: #cbd5f5;
}

html[data-theme="dark"] pre,
html.theme-dark pre {
  border-color: var(--seb-dark-border);
  background-color: var(--seb-dark-surface);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] code,
html.theme-dark code {
  background-color: var(--seb-dark-elevated);
  color: var(--seb-dark-highlight);
}

html[data-theme="dark"] table tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] table tbody > tr:nth-child(odd) > th,
html.theme-dark table tbody > tr:nth-child(odd) > td,
html.theme-dark table tbody > tr:nth-child(odd) > th {
  background-color: var(--seb-dark-surface);
}

html[data-theme="dark"] hr,
html.theme-dark hr {
  border-bottom-color: var(--seb-dark-border);
}

html[data-theme="dark"] .share a,
html.theme-dark .share a,
html[data-theme="dark"] .newer-posts,
html.theme-dark .newer-posts,
html[data-theme="dark"] .older-posts,
html.theme-dark .older-posts {
  background: var(--seb-dark-accent-strong);
  color: #031525;
}

html[data-theme="dark"] .share a:hover,
html.theme-dark .share a:hover,
html[data-theme="dark"] .newer-posts:hover,
html.theme-dark .newer-posts:hover,
html[data-theme="dark"] .older-posts:hover,
html.theme-dark .older-posts:hover {
  background: var(--seb-dark-accent);
  color: #031525;
}

html[data-theme="dark"] .author-meta,
html.theme-dark .author-meta {
  color: var(--seb-dark-muted);
}

html[data-theme="dark"] .author-meta a,
html.theme-dark .author-meta a {
  color: var(--seb-dark-muted);
}

html[data-theme="dark"] .footer,
html.theme-dark .footer {
  background: #0b1120;
  color: var(--seb-dark-muted);
}

html[data-theme="dark"] .footer a,
html.theme-dark .footer a {
  color: #cbd5f5;
}

html[data-theme="dark"] .footer a:hover,
html.theme-dark .footer a:hover {
  color: var(--seb-dark-text);
}

.theme-toggle {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px 4px;
  font-size: 17px;
  line-height: 1;
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--seb-dark-accent-strong);
  outline-offset: 2px;
}

.theme-toggle__sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle__moon,
html.theme-dark .theme-toggle__moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle__sun,
html.theme-dark .theme-toggle__sun {
  display: inline;
}

.theme-toggle__moon,
.theme-toggle__sun {
  pointer-events: none;
}
html[data-theme="dark"] .highlight,
html.theme-dark .highlight,
html[data-theme="dark"] .highlight pre,
html.theme-dark .highlight pre,
html[data-theme="dark"] .highlight code,
html.theme-dark .highlight code {
  background: var(--seb-dark-surface);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .intro,
html.theme-dark .intro {
  background: var(--seb-dark-surface);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .intro h2,
html.theme-dark .intro h2 {
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .intro p,
html.theme-dark .intro p {
  color: var(--seb-dark-muted);
}

html[data-theme="dark"] .read-more,
html.theme-dark .read-more {
  border-color: var(--seb-dark-border);
  color: var(--seb-dark-text);
}

html[data-theme="dark"] .read-more:hover,
html.theme-dark .read-more:hover {
  border-color: var(--seb-dark-accent);
  color: var(--seb-dark-accent);
}