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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background: var(--color-ivory);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: 70px;
}

:root {
  --color-forest: #1a4d2e;
  --color-sage: #4f7942;
  --color-emerald: #2d9c6f;
  --color-sky: #2b7a9f;
  --color-ocean: #1a5f7a;
  --color-amber: #e89b3c;

  --color-charcoal: #1a1a1a;
  --color-slate: #2f3e46;
  --color-stone: #52796f;
  --color-sand: #cad2c5;
  --color-cream: #f4f4f0;
  --color-ivory: #fdfdf8;
  --color-white: #ffffff;

  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
  --font-accent: "Space Grotesk", sans-serif;

  --spacing-lg: 4rem;
  --spacing-xxl: 8rem;

  --transition-smooth: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-gentle: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}