/* OneSource refined surfaces — restrained neumorphism, balanced contrast, shared across pages. */
:root {
  --os-ease: cubic-bezier(.22,.8,.24,1);
  --os-motion-fast: 180ms;
  --os-motion-ui: 240ms;
}
html { scroll-behavior: smooth; }
body,
.contact-page,
.contact-main,
.recognition-page,
.recognition-main,
.project-detail,
.project-body,
.contact-card,
.contact-direct,
.recognition-card,
.recognition-band-item,
.recognition-filter,
.recognition-toolbar,
.navigation-drawer,
.navigation-drawer li a,
.about-meta .meta-row,
.experience-strip article,
.focus-card,
.collab-card,
.reference-block,
.project-meta span,
.outline-button,
.project-more,
.project-details-button,
.coverage-more,
input:not([type="checkbox"]),
textarea,
select {
  transition: background-color var(--os-motion-ui) var(--os-ease),
              color var(--os-motion-ui) var(--os-ease),
              border-color var(--os-motion-ui) var(--os-ease),
              box-shadow var(--os-motion-ui) var(--os-ease),
              transform var(--os-motion-fast) var(--os-ease);
}

/* Light mode: chalk-grey foundations with soft raised edges, never harsh white slabs. */
html[data-theme="light"] body { background: #eef1ef; }
html[data-theme="light"] .project-card:not(.project-card--open),
html[data-theme="light"] .focus-card,
html[data-theme="light"] .experience-strip article,
html[data-theme="light"] .collab-card,
html[data-theme="light"] .coverage-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .contact-direct,
html[data-theme="light"] .recognition-card,
html[data-theme="light"] .recognition-band-item,
html[data-theme="light"] .recognition-filter,
html[data-theme="light"] .recognition-toolbar,
html[data-theme="light"] .reference-block,
html[data-theme="light"] .project-more,
html[data-theme="light"] .project-details-button,
html[data-theme="light"] .outline-button,
html[data-theme="light"] .coverage-more {
  border-color: #d5ddd8 !important;
  box-shadow: 5px 5px 13px rgba(42,57,49,.055), -4px -4px 12px rgba(255,255,255,.78) !important;
}
html[data-theme="light"] .project-card:not(.project-card--open),
html[data-theme="light"] .focus-card,
html[data-theme="light"] .experience-strip article,
html[data-theme="light"] .collab-card,
html[data-theme="light"] .coverage-card { background-color: #f6f8f6 !important; }
html[data-theme="light"] .project-card:not(.project-card--open):hover,
html[data-theme="light"] .focus-card:hover,
html[data-theme="light"] .collab-card:hover,
html[data-theme="light"] .recognition-card:hover { transform: translateY(-2px); box-shadow: 7px 8px 18px rgba(42,57,49,.085), -3px -3px 10px rgba(255,255,255,.9) !important; }

/* Dark mode: graphite surfaces with a quiet upper edge and diffuse shadow. */
html[data-theme="dark"] .project-card:not(.project-card--open),
html[data-theme="dark"] .focus-card,
html[data-theme="dark"] .experience-strip article,
html[data-theme="dark"] .collab-card,
html[data-theme="dark"] .coverage-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .contact-direct,
html[data-theme="dark"] .recognition-card,
html[data-theme="dark"] .recognition-band-item,
html[data-theme="dark"] .recognition-filter,
html[data-theme="dark"] .recognition-toolbar,
html[data-theme="dark"] .reference-block,
html[data-theme="dark"] .project-more,
html[data-theme="dark"] .project-details-button,
html[data-theme="dark"] .outline-button,
html[data-theme="dark"] .coverage-more {
  border-color: #2a393c !important;
  box-shadow: 5px 6px 15px rgba(0,0,0,.20), -3px -3px 10px rgba(255,255,255,.012) !important;
}
html[data-theme="dark"] .project-card:not(.project-card--open),
html[data-theme="dark"] .focus-card,
html[data-theme="dark"] .experience-strip article,
html[data-theme="dark"] .collab-card,
html[data-theme="dark"] .coverage-card { background-color: #151f22 !important; }
html[data-theme="dark"] .project-card:not(.project-card--open):hover,
html[data-theme="dark"] .focus-card:hover,
html[data-theme="dark"] .collab-card:hover,
html[data-theme="dark"] .recognition-card:hover { transform: translateY(-2px); box-shadow: 7px 9px 20px rgba(0,0,0,.28), -3px -3px 10px rgba(255,255,255,.018) !important; }

/* About metadata should blend into its section; only the dividers define the table. */
html[data-theme="dark"] .about-meta,
html[data-theme="light"] .about-meta {
  background: transparent !important;
  border-top-color: var(--line) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="dark"] .about-meta .meta-row,
html[data-theme="light"] .about-meta .meta-row {
  background: transparent !important;
  border-bottom-color: var(--line) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="dark"] .about-meta .meta-row:hover { background: rgba(229,241,236,.025) !important; }
html[data-theme="light"] .about-meta .meta-row:hover { background: rgba(36,63,51,.025) !important; }

/* Contact icon wells: replace the old near-black legacy wells in light mode. */
html[data-theme="light"] .contact-card-icon,
html[data-theme="light"] .contact-card-icon--visual {
  background: #e8eeeb !important;
  border: 1px solid #cbd6d0 !important;
  border-radius: 12px;
  box-shadow: inset 2px 2px 5px rgba(46,62,53,.055), inset -2px -2px 5px rgba(255,255,255,.86) !important;
}
html[data-theme="dark"] .contact-card-icon,
html[data-theme="dark"] .contact-card-icon--visual {
  background: #111a1d !important;
  border: 1px solid #344448 !important;
  border-radius: 12px;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,.20), inset -2px -2px 5px rgba(255,255,255,.018) !important;
}
html[data-theme="light"] .contact-card-media { background: #e8eeeb !important; border-color: #cbd6d0 !important; }
html[data-theme="dark"] .contact-card-media { background: #101719 !important; border-color: #344448 !important; }
html[data-theme="light"] .contact-card::before { background: linear-gradient(145deg,rgba(255,255,255,.50),transparent 48%) !important; }
html[data-theme="dark"] .contact-card::before { background: linear-gradient(145deg,rgba(255,255,255,.025),transparent 48%) !important; }

/* High-clarity navigation. The drawer follows the selected theme; the fixed top bar remains dark chrome. */
.site-navbar .nav-links a,
.site-navbar .menu-button { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.22); }
.site-navbar .nav-links a:hover,
.site-navbar .nav-links a:focus-visible,
.site-navbar .menu-button:hover { color: #fff !important; }
html[data-theme="light"] .navigation-drawer {
  background: rgba(246,248,246,.98) !important;
  color: #1d2a25 !important;
  border-color: #d0dad4 !important;
  box-shadow: 10px 16px 34px rgba(33,48,40,.15), -3px -3px 10px rgba(255,255,255,.72) !important;
}
html[data-theme="light"] .navigation-drawer li a { color: #34443d !important; }
html[data-theme="light"] .navigation-drawer li a:hover,
html[data-theme="light"] .navigation-drawer li a:focus-visible,
html[data-theme="light"] .navigation-drawer li a.is-active { color: #13251d !important; background: #e5ece8 !important; }
html[data-theme="light"] .navigation-drawer .drawer-kicker { color: #256c56 !important; }
html[data-theme="light"] .navigation-drawer .drawer-footer { color: #586a61 !important; border-top-color: #d2dcd6 !important; }
html[data-theme="dark"] .navigation-drawer {
  background: rgba(16,23,25,.98) !important;
  color: #edf4f1 !important;
  border-color: #304044 !important;
  box-shadow: 10px 16px 34px rgba(0,0,0,.34), -2px -2px 8px rgba(255,255,255,.012) !important;
}
html[data-theme="dark"] .navigation-drawer li a { color: #e1eae6 !important; }
html[data-theme="dark"] .navigation-drawer li a:hover,
html[data-theme="dark"] .navigation-drawer li a:focus-visible,
html[data-theme="dark"] .navigation-drawer li a.is-active { color: #fff !important; background: #202e31 !important; }
html[data-theme="dark"] .navigation-drawer .drawer-footer { color: #aabbb5 !important; }

/* Neutral focus for theme control: no green outline or neon glow. */
.theme-switch:focus-within .theme-switch__container,
.theme-switch__checkbox:focus-visible + .theme-switch__container {
  outline: 2px solid #7a8983 !important;
  outline-offset: 3px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.20), inset 0 1px 2px rgba(0,0,0,.15) !important;
}
.theme-switch__container:active,
.theme-switch:active .theme-switch__container { outline-color: transparent !important; }

@media (max-width: 760px) {
  html[data-theme="light"] .contact-card,
  html[data-theme="light"] .contact-direct,
  html[data-theme="light"] .recognition-card,
  html[data-theme="light"] .recognition-band-item { background-color: #f6f8f6 !important; }
  html[data-theme="dark"] .contact-card,
  html[data-theme="dark"] .contact-direct,
  html[data-theme="dark"] .recognition-card,
  html[data-theme="dark"] .recognition-band-item { background-color: #151f22 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, body *, body *::before, body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}