:root {
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 68%);
  --lift-shadow: 0 16px 38px rgba(17, 24, 39, 0.12);
  --quiet-shadow: 0 1px 0 color-mix(in srgb, var(--surface), #ffffff 26%) inset;
}

html[data-theme="dark"] {
  --lift-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  --quiet-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

html {
  text-rendering: optimizeLegibility;
}

body {
  accent-color: var(--accent);
}

::selection {
  background: color-mix(in srgb, var(--accent), transparent 70%);
  color: var(--ink);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:where(button, a) {
  touch-action: manipulation;
}

:where(
  .button,
  .icon-button,
  .theme-toggle,
  .read-more,
  .close-card,
  .filter-button,
  .app-header nav a,
  .project-header nav a,
  .gallery-header nav a,
  .toolbar button,
  .pagination button,
  .action-button,
  .segmented-control button,
  .filter-bar button,
  .map-tools button
) {
  box-shadow: var(--quiet-shadow);
}

:where(
  .project-card,
  .app-link,
  .skill-group,
  .experience-card,
  .profile-panel,
  .focus-list,
  .education-card,
  .image-panel,
  .upload-panel,
  .status-panel,
  .summary-grid article,
  .section-nav,
  .data-workspace,
  .market-note,
  .panel,
  .kpi-grid article,
  .control-panel,
  .source-card,
  .driver-card,
  .segment-card,
  .detail-panel,
  .detail-content
) {
  box-shadow: var(--shadow), var(--quiet-shadow);
}

.site-header,
.app-header,
.project-header,
.gallery-header {
  backdrop-filter: blur(18px) saturate(1.12);
}

.app-header nav,
.project-header nav,
.gallery-header nav,
.header-actions {
  flex-wrap: wrap;
}

.brand strong,
h1,
h2,
h3 {
  text-wrap: balance;
}

.hero-summary,
.project-hero p,
.intro p,
.slide-content p {
  text-wrap: pretty;
}

.app-link,
.project-card {
  position: relative;
  overflow: hidden;
}

.app-link::before,
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent), transparent 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.app-link:hover::before,
.project-card:hover::before {
  opacity: 1;
}

.image-panel img,
.slide img {
  transform-origin: center;
  transition: transform 260ms ease, filter 260ms ease;
}

@media (hover: hover) {
  :where(
    .button,
    .icon-button,
    .theme-toggle,
    .read-more,
    .close-card,
    .filter-button,
    .app-header nav a,
    .project-header nav a,
    .gallery-header nav a,
    .toolbar button,
    .pagination button,
    .action-button,
    .segmented-control button,
    .filter-bar button,
    .map-tools button
  ):hover {
    box-shadow: var(--lift-shadow);
  }

  .image-panel:hover img {
    transform: scale(1.025);
  }

  .slide.is-active img {
    transform: scale(1.01);
  }
}

:where(
  .button,
  .icon-button,
  .theme-toggle,
  .read-more,
  .close-card,
  .filter-button,
  .app-header nav a,
  .project-header nav a,
  .gallery-header nav a,
  .toolbar button,
  .pagination button,
  .action-button,
  .segmented-control button,
  .filter-bar button,
  .map-tools button
):active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 760px) {
  .app-header nav,
  .project-header nav,
  .gallery-header nav,
  .header-actions {
    gap: 0.5rem;
  }

  .app-header nav a,
  .project-header nav a,
  .gallery-header nav a,
  .theme-toggle {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}