:root {
  --radius: 1.25rem;
  --background: oklch(98% 0.012 95);
  --foreground: oklch(22% 0.04 145);
  --cream: oklch(96.5% 0.018 90);
  --moss: oklch(32% 0.06 145);
  --leaf: oklch(45% 0.09 145);
  --bark: oklch(28% 0.03 60);
  --border: rgba(34, 56, 38, 0.15);
  
  --shadow-soft: 0 8px 30px -12px oklch(32% 0.06 145 / 25%);
  --shadow-card: 0 24px 60px -30px oklch(32% 0.06 145 / 35%);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Custom Typography classes to match references */
h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* Premium background grain pattern */
.grain {
  position: relative;
}

.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(var(--moss) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.04;
  z-index: 1;
}

/* Custom scrollbar to match theme */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cream);
}
::-webkit-scrollbar-thumb {
  background: var(--moss);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--leaf);
}

/* Fade-in transitions on Scroll */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

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

/* Delays for children inside grids */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Backdrop Blur and Shadows */
.blur-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Custom styles for FAQ items */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  opacity: 1;
}

.faq-item .faq-toggle-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle-icon {
  transform: rotate(45deg);
}