html[data-theme="dark"] {
  --page-bg: #0b1118;
  --sidebar-bg: #111a24;
  --panel-bg: rgba(19, 28, 39, 0.84);
  --card-border: rgba(145, 170, 204, 0.14);
  --text-strong: #e8eef7;
  --text-body: #b4c0d2;
  --text-soft: #7f8ea3;
  --chip-bg: rgba(255, 255, 255, 0.04);
  --chip-border: rgba(255, 255, 255, 0.08);
  --button-bg: #7ca7d6;
  --button-bg-hover: #93bae6;
  --shadow-soft: 0 22px 50px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(73, 122, 176, 0.2), transparent 26%),
    linear-gradient(180deg, #101720 0%, var(--page-bg) 100%);
  color: var(--text-strong);
}

html[data-theme="dark"] .section-card,
html[data-theme="dark"] .experience-card {
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .sidebar {
  border-color: rgba(145, 170, 204, 0.12);
}

html[data-theme="dark"] .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 18, 0.08), rgba(5, 10, 18, 0.22));
  pointer-events: none;
}

html[data-theme="dark"] .sticker {
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.35));
}

html[data-theme="dark"] .role {
  color: #d3dceb;
}

html[data-theme="dark"] .separator {
  background: linear-gradient(
    90deg,
    rgba(164, 189, 222, 0.04),
    rgba(164, 189, 222, 0.34),
    rgba(164, 189, 222, 0.04)
  );
}

html[data-theme="dark"] .chip-contact {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .mini-badge.dark,
html[data-theme="dark"] .initial-badge.dark {
  background: #d9e2ee;
  color: #0f141a;
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .primary-button:hover,
html[data-theme="dark"] .primary-button:focus-visible {
  color: #09121d;
}

html[data-theme="dark"] .card-head p,
html[data-theme="dark"] .mini-block p,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .chip-contact,
html[data-theme="dark"] .card-body li,
html[data-theme="dark"] .card-body h3 {
  color: var(--text-body);
}

html[data-theme="dark"] .section-card h2,
html[data-theme="dark"] .experience-card h2,
html[data-theme="dark"] .section-card h3,
html[data-theme="dark"] .experience-card h3,
html[data-theme="dark"] .identity-block h1,
html[data-theme="dark"] .eyebrow {
  color: var(--text-strong);
}

html[data-theme="dark"] .sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(124, 167, 214, 0.4);
  border: 2px solid transparent;
  background-clip: padding-box;
}

html[data-theme="dark"] .sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(147, 186, 230, 0.55);
  border: 2px solid transparent;
  background-clip: padding-box;
}

@supports not ((backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .section-card,
  html[data-theme="dark"] .experience-card {
    background: rgba(19, 28, 39, 0.96);
  }
}