:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

html.dark body,
html.dark .bg-white,
html.dark .bg-\[\#f8fafc\],
html.dark .bg-\[\#f5f7fb\] {
  background-color: #071426 !important;
}

html.dark .bg-\[\#071426\] {
  background-color: #020817 !important;
}

html.dark .text-\[\#071426\] {
  color: #f8fafc !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .shadow-sm,
html.dark .shadow-xl,
html.dark .shadow-2xl {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28) !important;
}

html.dark .bg-\[\#f8fafc\] .bg-white,
html.dark .bg-white .bg-\[\#f8fafc\],
html.dark .bg-\[\#f8fafc\],
html.dark .bg-white {
  background-color: #0b1f38 !important;
}

html.dark input,
html.dark textarea,
html.dark select {
  background-color: #0b1f38 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

body {
  padding-top: 64px;
}

.page-kicker {
  color: #0ea5e9;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.event-year-panel {
  scroll-margin-top: 96px;
}

.gallery-scroll {
  scrollbar-width: thin;
  scrollbar-color: #0ea5e9 #e2e8f0;
}

html.dark .gallery-scroll {
  scrollbar-color: #38bdf8 #0b1f38;
}