@layer base {
  :root {
    --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-display: "Outfit", system-ui, sans-serif;
    --font-serif: "Newsreader", Georgia, serif;

    --bg-main: #f6f7f5;
    --bg-card: #ffffff;
    --bg-card-subtle: #eaece8;
    --text-primary: #1a221e;
    --text-muted: #525f57;
    --border-subtle: #d8ded4;
    --border-nav: #e2e6df;
  }

  html.dark {
    --bg-main: #0d1410;
    --bg-card: #151f19;
    --bg-card-subtle: #1c2822;
    --text-primary: #f0f4f1;
    --text-muted: #a0ac9e;
    --border-subtle: #27382e;
    --border-nav: #233229;
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
  }

  h1,
  h2,
  h3,
  h4,
  .font-display {
    font-family: var(--font-display);
  }

  .font-serif-accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
  }
}

/* Dark mode utility overrides */
html.dark body {
  background-color: #0d1410;
  color: #f0f4f1;
}

html.dark section {
  background-color: #0d1410 !important;
  border-color: #233229 !important;
}

html.dark #nav-container {
  background-color: rgba(13, 20, 16, 0.9) !important;
  border-color: #233229 !important;
}

html.dark #mobile-menu {
  background-color: #0d1410 !important;
  border-color: #233229 !important;
}

html.dark .bg-white {
  background-color: #151f19 !important;
  border-color: #27382e !important;
}

html.dark .bg-\[\#f6f7f5\] {
  background-color: #0d1410 !important;
}

html.dark .bg-\[\#eaece8\] {
  background-color: #1c2822 !important;
  border-color: #2d4237 !important;
}

html.dark .bg-\[\#f9faf8\] {
  background-color: #1c2822 !important;
  border-color: #2d4237 !important;
  color: #f0f4f1 !important;
}

html.dark .text-\[\#1a221e\] {
  color: #f0f4f1 !important;
}

html.dark .text-\[\#525f57\],
html.dark .text-\[\#4a554f\] {
  color: #a0ac9e !important;
}

html.dark .border-\[\#d8ded4\],
html.dark .border-\[\#cbd2c8\],
html.dark .border-\[\#e2e6df\] {
  border-color: #27382e !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1c2822 !important;
  border-color: #2d4237 !important;
  color: #f0f4f1 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6d7d72 !important;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Custom subtle scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f2ee;
}
html.dark ::-webkit-scrollbar-track {
  background: #111814;
}
::-webkit-scrollbar-thumb {
  background: #cbd2c8;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #27382e;
}
::-webkit-scrollbar-thumb:hover {
  background: #9fa89b;
}