/* Let the browser pick light/dark UI chrome (scrollbars, form controls) automatically, to match
   whichever theme below actually applies. */
:root { color-scheme: light dark; }

/* Premium custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #ffffff; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track { background: #0a0a0a; }
  ::-webkit-scrollbar-thumb { background: #3f3f46; }
  ::-webkit-scrollbar-thumb:hover { background: #52525b; }
}

/* Subtle Text Gradient for Accents */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #1976D2, #26A69A);
}

/* Sophisticated Underline Hover */
.nav-link {
  position: relative;
  color: #050505;
  transition: color 0.3s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #050505;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
@media (prefers-color-scheme: dark) {
  .nav-link { color: #050505 }
  .nav-link::after { background-color: #050505 }
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Page fade-in (was the SPA view transition; now runs once per real page load) */
.page-view {
  animation: fadeInView 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInView {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Utility for structural grid lists */
.structural-list>div { border-bottom: 1px solid #e5e5e5; }
.structural-list>div:last-child { border-bottom: none; }
@media (prefers-color-scheme: dark) {
  .structural-list>div { border-bottom-color: #262626; }
}