/* Base styles and custom utilities */
:root {
  --emerald-50: #f2fcf5;
  --emerald-100: #e1f5e8;
  --emerald-200: #c3e8d0;
  --emerald-300: #8fd1a5;
  --emerald-400: #5bb875;
  --emerald-500: #359950;
  --emerald-600: #1d7a38;
  --emerald-700: #145f2b;
  --emerald-800: #114b23;
  --emerald-900: #0d3a1b;
  --emerald-950: #071f0e;
  --cream-50: #fefdf8;
  --cream-100: #fdf9ed;
  --cream-200: #faefce;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cream-50);
}
::-webkit-scrollbar-thumb {
  background: var(--emerald-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--emerald-500);
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--emerald-600);
  outline-offset: 2px;
}

/* Smooth scroll offset for fixed nav */
[id] {
  scroll-margin-top: 80px;
}

/* Select dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23145f2b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Selection color */
::selection {
  background: var(--emerald-200);
  color: var(--emerald-950);
}
</script>