/* 1. Add spacing vars
   Added for consistent responsive spacing
*/
:root {
  --sp-base: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 3rem;
}

/* Existing color vars remain */
:root {
  --gold: #E8A849;
  --cream: #f5f0e8;
  --navy: #001321;
  --ink: #1a1a1a;
  --warm: #a6683c;
  --bg: #FAF7F0;
  --surface: #e8eff3;
}

/* 2. Responsive adjustments */
@media (min-width: 640px) {
  .navbar {
    padding: var(--sp-sm) var(--sp-lg);
  }
}

/* 3. Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --ink: #faf7f0;
  }
}

/* 4. Focus visible */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 5. Navbar link reuse */
.navbar-link {
  display: inline-block;
  color: rgba(245, 240, 232, 0.85);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.navbar-link.active {
  color: var(--gold);
  border-color: var(--gold);
}

.navbar-link:hover {
  color: var(--cream);
}

/* 6. Typography helpers */
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }