/* Custom styles for Ayasto */

:root {
  --radius: 0.75rem;

  --background: #fcfaf1;
  --foreground: #0b2010;
  --card: #fcfaf1;
  --card-foreground: #0b2010;
  --popover: #fcfaf1;
  --popover-foreground: #0b2010;

  --primary: #015d2d;
  --primary-foreground: #fbfcfb;
  --secondary: #e5ece0;
  --secondary-foreground: #1b3d2f;
  --muted: #f2f4ec;
  --muted-foreground: #546d61;
  --accent: #83b83f;
  --accent-foreground: #10221a;
  --destructive: #b82528;
  --destructive-foreground: #fbfcfb;

  --border: #d5dacb;
  --input: #e0e5dd;
  --ring: #015d2d;

  --forest: #003f17;
  --moss: #448335;
  --sage: #c0d6b5;
  --bark: #4d3d2e;
  --bone: #fcfaf1;

  --gradient-forest: linear-gradient(135deg, #003f17 0%, #015d2d 50%, #448335 100%);
  --gradient-sun: linear-gradient(180deg, #fcfaf1 0%, #e5ece0 100%);
  --shadow-soft: 0 20px 60px -20px rgba(0, 63, 23, 0.25);
  --shadow-lift: 0 2px 6px -1px rgba(0, 63, 23, 0.1), 0 20px 40px -10px rgba(0, 63, 23, 0.18);
}

body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

h1 {
  line-height: 0.95 !important;
}

/* Custom background utilities matching the React Tailwind configuration */
.bg-gradient-forest {
  background-image: var(--gradient-forest) !important;
}

.bg-gradient-sun {
  background-image: var(--gradient-sun) !important;
}

.shadow-soft {
  box-shadow: var(--shadow-soft) !important;
}

.shadow-lift {
  box-shadow: var(--shadow-lift) !important;
}

/* Reveal transition classes */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}