/* Shared semantic surfaces also serve the recognition rail and project highlights. */
:root {
  color-scheme: light;
  --surface-soft: #edf1f8;
  --surface-strong: #e0e8f6;
  --accent-surface: #e6edff;
  --accent-ink: #24406f;
  --proof-line: #dce2ed;
  --project-buzz: #ece7dc;
  --project-buzz-ink: #36352f;
  --project-buzz-muted: #665f53;
  --project-buzz-line: #b1a99b;
  --project-space: #f0e7eb;
  --project-space-ink: #4e3444;
  --project-space-muted: #785c6d;
  --project-space-line: #9c7487;
  --project-groce: #e2ddf2;
  --project-groce-ink: #292743;
  --project-groce-muted: #514b6c;
  --project-groce-line: #bbb3d2;
  --code-surface: #e8edf5;
  --code-ink: #18233e;
  --tag-surface: #e8edf5;
  --tag-ink: #425472;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 650 12px/1.4 Manrope, Arial, sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease-out, border-color .18s ease-out;
}
.theme-toggle:hover { background: var(--surface-soft); border-color: var(--muted); }
.theme-toggle:active { background: var(--surface-strong); }
.theme-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.theme-toggle-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121b2b;
  --white: #fff;
  --ink: #e9edf6;
  --muted: #aebbd0;
  --blue: #9db7ff;
  --blue-dark: #b6caff;
  --blue-light: #25375d;
  --line: #314159;
  --navy: #1a315b;
  --navy-soft: #294677;
  --mint: #9be0c0;
  --sspace: #332630;
  --groce: #2a283f;
  --surface-soft: #19263b;
  --surface-strong: #23334e;
  --accent-surface: #22365b;
  --accent-ink: #dce7ff;
  --proof-line: #3e5475;
  --project-buzz: #302d27;
  --project-buzz-ink: #f1e9da;
  --project-buzz-muted: #c7beaa;
  --project-buzz-line: #6b6251;
  --project-space: #332630;
  --project-space-ink: #f4dfe9;
  --project-space-muted: #cfb5c5;
  --project-space-line: #9a7a8d;
  --project-groce: #2a283f;
  --project-groce-ink: #e9e3fc;
  --project-groce-muted: #c9bfeb;
  --project-groce-line: #71658f;
  --code-surface: #1c2b42;
  --code-ink: #dfebff;
  --tag-surface: #243652;
  --tag-ink: #d1def5;
}

/* Map the original hardcoded section colors to the current theme. */
:root[data-theme="dark"] .role span { color: #8fa3c1; }
:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .skip-link { background: var(--blue); color: #14203a; }
:root[data-theme="dark"] .primary:hover { background: var(--blue-dark); }
:root[data-theme="dark"] .availability-dot { background: #85d1b0; }
:root[data-theme="dark"] .about-section { background: var(--surface-soft); }
:root[data-theme="dark"] .education-block,
:root[data-theme="dark"] .skills-list > div { border-color: var(--line); }
:root[data-theme="dark"] .certification { background: var(--surface-strong); }
:root[data-theme="dark"] .cert-mark { border-bottom-color: #e4ab63; }
:root[data-theme="dark"] .cert-mark span { color: var(--muted); }
:root[data-theme="dark"] .contact-section { background: #1b356f; color: #f4f7ff; }
:root[data-theme="dark"] .contact-status,
:root[data-theme="dark"] .contact-intro > p { color: #d1dfff; }
:root[data-theme="dark"] .contact-button { background: #e9efff; color: #1b356f; }
:root[data-theme="dark"] .contact-button:hover { background: #fff; }
:root[data-theme="dark"] .contact-bottom { border-color: #536fac; }
:root[data-theme="dark"] .copy-email { color: #d1dfff; }
:root[data-theme="dark"] .copy-email:hover { background: #294887; color: #fff; }
:root[data-theme="dark"] .copy-status { color: #eef3ff; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #536580; }

/* The showcase owns local tokens, so map them explicitly as well. */
:root[data-theme="dark"] .hs-showcase {
  --hs-paper: var(--paper);
  --hs-ink: var(--ink);
  --hs-muted: var(--muted);
  --hs-blue: var(--blue);
  --hs-line: var(--line);
}
.hs-tech li { background: var(--tag-surface); color: var(--tag-ink); }
.hs-notes pre { background: var(--code-surface); color: var(--code-ink); }
.hs-buzz-stage { background: var(--project-buzz); color: var(--project-buzz-ink); }
.hs-buzz-stage .hs-stage-description,
.hs-buzz-stage .hs-stage-caption,
.hs-buzz-stage .hs-path span { color: var(--project-buzz-muted); }
.hs-buzz-stage .hs-path li { border-color: var(--project-buzz-line); }
.hs-space-stage { background: var(--project-space); color: var(--project-space-ink); }
.hs-space-stage .hs-space-api p,
.hs-space-stage .hs-space-services,
.hs-space-stage .hs-stage-caption { color: var(--project-space-muted); }
.hs-space-stage .hs-space-services strong { color: var(--project-space-ink); }
.hs-space-branch,
.hs-space-branch::after,
.hs-space-api { border-color: var(--project-space-line); }
.hs-groce-stage { background: var(--project-groce); color: var(--project-groce-ink); }
.hs-groce-stage .hs-stage-description,
.hs-groce-stage .hs-stage-caption { color: var(--project-groce-muted); }

:root[data-theme="dark"] .hs-buzz-stage .hs-stage-caption { border-color: var(--project-buzz-line); }
:root[data-theme="dark"] .hs-space-stage .hs-stage-caption,
:root[data-theme="dark"] .hs-space-clients span { border-color: var(--project-space-line); }
:root[data-theme="dark"] .hs-groce-stage .hs-stage-caption { border-color: var(--project-groce-line); }
:root[data-theme="dark"] .hs-buzz-screen { border-color: #706858; box-shadow: 13px 24px 35px -18px #0009; }
:root[data-theme="dark"] .hs-phone { border-color: #756d8d; box-shadow: 13px 24px 35px -18px #0009; }

/* Original branding stays unfiltered; a small light field preserves the marks. */
:root[data-theme="dark"] .hs-space-logo {
  mix-blend-mode: normal;
  background: #f0e7eb;
  border-radius: 7px;
  padding: 10px;
}
:root[data-theme="dark"] .hs-groce-logo {
  mix-blend-mode: normal;
  background: #e2ddf2;
  border-radius: 7px;
  padding: 8px;
}
:root[data-theme="dark"] .project-nav-logo--space { background: #f0e7eb; }
:root[data-theme="dark"] .project-nav-logo--groce { background: #e2ddf2; }
:root[data-theme="dark"] .brand-icon-surface { background: #edf2fb; }
:root[data-theme="dark"] .brand-icon-surface img { mix-blend-mode: normal; filter: none; }

/* New proof points remain part of the page hierarchy in both themes. */
.hero-proof { border-color: var(--proof-line); }
.proof-item { border-color: var(--proof-line); }
.proof-title { color: var(--ink); }
.proof-detail { color: var(--muted); }
.proof-icon { color: var(--blue); }
.hs-project-distinction { background: var(--accent-surface); color: var(--accent-ink); border-color: var(--proof-line); }
.hs-project-distinction .distinction-copy { color: var(--accent-ink); }
.hs-project-distinction .distinction-icon { color: var(--blue); }
:root[data-theme="dark"] .hs-client-distinction { background: #243c35; color: #d4eee1; border-color: #496c5d; }
:root[data-theme="dark"] .hs-client-distinction .distinction-copy { color: #d4eee1; }
:root[data-theme="dark"] .hs-client-distinction .distinction-icon { color: #a9d8bf; }

@media (max-width: 760px) {
  .header-contact { display: none; }
  .theme-toggle { margin-left: auto; }
  .menu-toggle { margin-left: 0; }
}
@media (max-width: 480px) {
  .theme-toggle { min-width: 44px; width: 44px; padding: 10px; }
  .theme-toggle-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}
@media print {
  :root[data-theme] {
    color-scheme: light;
    --paper: #fff;
    --ink: #18233e;
    --muted: #43536e;
    --blue: #244cd8;
    --line: #dce2ed;
    --surface-soft: #edf1f8;
    --surface-strong: #e0e8f6;
    --accent-surface: #e6edff;
    --accent-ink: #24406f;
    --proof-line: #dce2ed;
    --project-buzz: #ece7dc;
    --project-buzz-ink: #36352f;
    --project-buzz-muted: #665f53;
    --project-buzz-line: #b1a99b;
    --project-space: #f0e7eb;
    --project-space-ink: #4e3444;
    --project-space-muted: #785c6d;
    --project-space-line: #9c7487;
    --project-groce: #e2ddf2;
    --project-groce-ink: #292743;
    --project-groce-muted: #514b6c;
    --project-groce-line: #bbb3d2;
    --code-surface: #e8edf5;
    --code-ink: #18233e;
    --tag-surface: #e8edf5;
    --tag-ink: #425472;
  }
  .theme-toggle { display: none; }
  :root[data-theme] .contact-section { background: #fff; color: var(--ink); }
  :root[data-theme] .contact-status,
  :root[data-theme] .contact-intro > p,
  :root[data-theme] .copy-status { color: var(--muted); }
  :root[data-theme] .contact-button { background: #fff; color: var(--blue); }
  :root[data-theme] .hs-client-distinction,
  :root[data-theme] .hs-client-distinction .distinction-copy { background: var(--accent-surface); color: var(--accent-ink); }
}