:root {
  /* Base */
  --bg: oklch(0.95 0.02 85);        /* warm sand */
  --text: oklch(29.903% 0.02439 26.679);      /* deep warm charcoal */

  /* Accents */
  --accent: oklch(62.14% 0.14461 43.861);    /* terracotta */
  --accent-soft: oklch(0.85 0.05 45);

  --olive: oklch(0.55 0.08 130);    /* muted olive */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
}

h1, h2, h3 {
  font-family: "Playfair Display", serif;
}

.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
}


a {
  color: var(--accent);
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  color: oklch(0.55 0.14 45); /* slightly deeper terracotta */
}

.section-alt {
  background: oklch(0.92 0.015 85);
  border-radius: 1em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.18 0.02 30);
    --text: oklch(0.92 0.02 85);
    --accent: oklch(0.70 0.14 45);
  }
}

/* Simple responsive grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.box {
  background: #ddd;
  height: 250px;
  border-radius: 16px;
}