@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  --color-primary: #315c45;
  --color-primary-dark: #1f4835;
  --color-primary-darker: #123426;
  --color-secondary: #fbfcf8;
  --color-accent: #d9e5d4;
  --color-dark: #193328;
  --color-sand: #e8dfc8;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: #3d5147;
  background-color: var(--color-secondary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--color-dark);
}

/* Therrace Specific Visual System Elements */
.organic-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(49, 92, 69, 0.1) 1px, transparent 0);
  background-size: 24px 24px;
}

.leaf-shadow {
  box-shadow: 0 20px 60px rgba(31, 72, 53, 0.13);
}

.bg-dots-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  pointer-events: none;
}

.hero-orb-one {
  background: radial-gradient(circle, #bfd3af, transparent);
  width: 400px;
  height: 400px;
  top: -10%;
  right: 5%;
}

.hero-orb-two {
  background: radial-gradient(circle, #e6eedf, transparent);
  width: 500px;
  height: 500px;
  bottom: -20%;
  left: -10%;
}

/* Header blur and transition */
header {
  transition: all 0.3s ease;
}

.header-scrolled {
  box-shadow: 0 4px 20px rgba(31, 72, 53, 0.08);
  border-color: #dce7d9;
}

/* Custom transitions and scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-secondary);
}

::-webkit-scrollbar-thumb {
  background: #a9c59f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Slide Down Animation for Mobile Menu */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDown 0.25s ease-out forwards;
}