/* Shared day/night controls — black neumorphic contrast hybrid (night) */
html {
  transition: background-color 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), color 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    background-color 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    color 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    fill 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    stroke 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.75s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) !important;
}

/* —— Night: black base + soft neu shadows + high-contrast type —— */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0a0a0a;
  --mist: #0e0e0e;
  --surface: #121212;
  --ink: #f4f4f4;
  --ink-soft: #c2c2c2;
  --ink-faint: rgba(244, 244, 244, 0.48);
  --sage: #8ec5d1;
  --sage-deep: #6eb0bf;
  --sage-mist: rgba(110, 176, 191, 0.14);
  --horizon: #d4a574;
  --horizon-mist: rgba(212, 165, 116, 0.1);
  --world-a: rgba(110, 176, 191, 0.08);
  --world-b: rgba(255, 255, 255, 0.03);
  --world-c: rgba(212, 165, 116, 0.06);
  --slate-mist: rgba(0, 0, 0, 0.55);
  --gold-leaf: rgba(255, 255, 255, 0.04);
  --gold-leaf-deep: rgba(0, 0, 0, 0.5);
  --gold-sheen: rgba(255, 255, 255, 0.06);
  --theme-meta: #000000;
  --logo-filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(180%) hue-rotate(180deg) brightness(98%) contrast(94%);
  --body-base: #080808;
  --header-bg: linear-gradient(to bottom, rgba(8, 8, 8, 0.97), rgba(12, 12, 12, 0.88), transparent);
  --footer-bg: linear-gradient(to top, #050505 0%, rgba(10, 10, 10, 0.96) 45%, rgba(12, 12, 12, 0.82) 100%);
  --section-jump-bg: #111111;
  --section-jump-bg-hover: #181818;
  --section-jump-border: rgba(255, 255, 255, 0.08);
  --panel-bg: #111111;
  --panel-bg-hover: #171717;
  --panel-border: rgba(255, 255, 255, 0.07);
  --panel-shadow: rgba(0, 0, 0, 0.72);
  --divider: rgba(255, 255, 255, 0.1);
  --scrollbar-track: rgba(255, 255, 255, 0.04);
  --grain-opacity: 0.14;
  --noise-opacity: 0.028;
  --neu-shadow-dark: rgba(0, 0, 0, 0.88);
  --neu-shadow-light: rgba(255, 255, 255, 0.045);
  --neu-raise: 7px 7px 16px var(--neu-shadow-dark), -5px -5px 14px var(--neu-shadow-light);
  --neu-inset: inset 6px 6px 14px var(--neu-shadow-dark), inset -5px -5px 12px var(--neu-shadow-light);
  --neu-flat: #0f0f0f;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(110, 176, 191, 0.05), transparent 52%),
    radial-gradient(ellipse 40% 30% at 100% 0%, rgba(255, 255, 255, 0.03), transparent 50%),
    linear-gradient(168deg, #0c0c0c 0%, #080808 48%, #050505 100%);
}

html[data-theme="dark"] body::before {
  opacity: 0.22;
  background:
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(110, 176, 191, 0.06), transparent 58%),
    radial-gradient(circle 30vw at 88% 12%, rgba(255, 255, 255, 0.02), transparent 55%);
}

html[data-theme="dark"] body::after {
  opacity: 0.12;
  mix-blend-mode: overlay;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--divider, rgba(26, 34, 48, 0.22));
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
  background: rgba(255, 255, 255, 0.34);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--horizon, #c4a574);
  border-color: rgba(196, 165, 116, 0.36);
}

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

.theme-toggle__icon {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7d57b, #c4a574);
  box-shadow: 0 0 0 3px rgba(196, 165, 116, 0.18);
}

html[data-theme="dark"] .theme-toggle {
  background: var(--neu-flat);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--ink-soft);
  box-shadow: var(--neu-raise);
}

html[data-theme="dark"] .theme-toggle:hover {
  color: var(--sage);
  border-color: rgba(110, 176, 191, 0.28);
  background: #141414;
}

html[data-theme="dark"] .theme-toggle__icon {
  background:
    radial-gradient(circle at 38% 34%, #f2f2f2 0%, #f2f2f2 16%, transparent 18%),
    linear-gradient(135deg, #8ec5d1, #3a3a3a);
  box-shadow:
    0 0 0 3px rgba(110, 176, 191, 0.16),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] header.site {
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

html.zs-shared-chrome[data-theme="dark"] header.site {
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0.98), rgba(10, 10, 10, 0.9), transparent);
}

html.zs-shared-chrome[data-theme="dark"] .site-search__field {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.zs-shared-chrome[data-theme="dark"] .site-search__field:focus-within {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(110, 176, 191, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(110, 176, 191, 0.14);
}

html.zs-shared-chrome[data-theme="dark"] .site-search__clear {
  background: rgba(255, 255, 255, 0.08);
  color: var(--zs-chrome-ink-soft, #c2c2c2);
}

html.zs-shared-chrome[data-theme="dark"] .site-search__clear:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--zs-chrome-ink, #f4f4f4);
}

html.zs-shared-chrome[data-theme="dark"] .site-search__results {
  background: rgba(14, 14, 14, 0.97);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

html.zs-shared-chrome[data-theme="dark"] .site-search__result:hover,
html.zs-shared-chrome[data-theme="dark"] .site-search__result.is-active {
  background: rgba(110, 176, 191, 0.12);
}

html[data-theme="dark"] footer.site-foot {
  background: var(--footer-bg);
  border-top-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .section-jump,
html[data-theme="dark"] .section-jump-btn {
  background: var(--section-jump-bg);
  border-color: var(--section-jump-border);
  box-shadow: var(--neu-raise);
  color: var(--ink-soft);
}

html[data-theme="dark"] .section-jump-btn:hover,
html[data-theme="dark"] .section-jump-btn[aria-pressed="true"] {
  background: var(--section-jump-bg-hover);
  color: var(--ink);
  border-color: rgba(110, 176, 191, 0.22);
}

/* Raised neu cards — lobby, garden, journal, etc. */
html[data-theme="dark"] .case,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .resume-panel,
html[data-theme="dark"] .contact-panel,
html[data-theme="dark"] .gallery-shell,
html[data-theme="dark"] .gallery-empty,
html[data-theme="dark"] .journal-card,
html[data-theme="dark"] .floor-card,
html[data-theme="dark"] .systems-card,
html[data-theme="dark"] .feed-card,
html[data-theme="dark"] .studio-link-card,
html[data-theme="dark"] .mission-card,
html[data-theme="dark"] .map-panel,
html[data-theme="dark"] .capital-card,
html[data-theme="dark"] .agenda-panel,
html[data-theme="dark"] .system-card,
html[data-theme="dark"] .pulse-card {
  background: var(--panel-bg) !important;
  border-color: var(--panel-border) !important;
  box-shadow: var(--neu-raise) !important;
}

html[data-theme="dark"] .case:hover,
html[data-theme="dark"] .tile:hover,
html[data-theme="dark"] .floor-card:hover {
  background: var(--panel-bg-hover) !important;
  border-color: rgba(110, 176, 191, 0.18) !important;
}

html[data-theme="dark"] .resume-tablist button {
  background: var(--neu-flat);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--neu-raise);
  color: var(--ink-soft);
}

html[data-theme="dark"] .resume-tablist button:hover {
  background: #151515;
  color: var(--sage);
}

html[data-theme="dark"] .resume-tablist button[aria-selected="true"] {
  background: #1a1a1a;
  color: var(--ink);
  border-color: rgba(110, 176, 191, 0.35);
  box-shadow: var(--neu-inset);
}

html[data-theme="dark"] .btn-ghost {
  background: var(--neu-flat);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--neu-raise);
  color: var(--ink-soft);
}

html[data-theme="dark"] .btn-ghost:hover {
  color: var(--sage);
  border-color: rgba(110, 176, 191, 0.22);
  background: #151515;
}

html[data-theme="dark"] .neu-recessed,
html[data-theme="dark"] .btn-primary.btn-welcome-flip,
html[data-theme="dark"] .btn-primary.btn-welcome-flip:hover,
html[data-theme="dark"] .btn-primary.btn-welcome-flip:active,
html[data-theme="dark"] .hero-focus-panel {
  background: linear-gradient(155deg, #141414 0%, #0c0c0c 42%, #111111 100%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--sage) !important;
  box-shadow: var(--neu-inset) !important;
}

html[data-theme="dark"] .developer-marquee {
  background:
    linear-gradient(90deg, rgba(4, 18, 22, 0.95), rgba(18, 72, 86, 0.82), rgba(4, 18, 22, 0.95)),
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 34%) !important;
  border-top-color: rgba(110, 176, 191, 0.22) !important;
  box-shadow:
    0 -12px 32px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 720px) {
  .theme-toggle {
    padding: 0.38rem 0.55rem;
  }
}