/* Design tokens & helpers roughly matching the original React + Tailwind setup */

:root {
  --background: 0 0% 100%;
  --foreground: 195 60% 15%;

  --card: 0 0% 100%;
  --card-foreground: 195 60% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 195 60% 15%;

  --primary: 188 75% 50%;
  --primary-foreground: 195 60% 15%;

  --secondary: 40 85% 55%;
  --secondary-foreground: 195 60% 15%;

  --muted: 195 30% 96%;
  --muted-foreground: 195 20% 40%;

  --accent: 40 85% 55%;
  --accent-foreground: 195 60% 15%;

  --destructive: 0 62.8% 50%;
  --destructive-foreground: 0 0% 98%;

  --border: 195 20% 85%;
  --input: 195 20% 85%;
  --ring: 188 85% 35%;

  --radius: 0.75rem;

  --teal-deep: 188 75% 30%;
  --teal-light: 188 70% 85%;
  --gold-warm: 35 80% 55%;
  --gold-soft: 40 90% 70%;

  --shadow-soft: 0 4px 20px -2px hsl(188 50% 35% / 0.15);
  --shadow-glow: 0 0 30px hsl(35 75% 45% / 0.3);

  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Georgia, serif;
}

.rounded-full {
  border-radius: 10px !important;
}

/* Utility helpers that were custom in the React project */

.bg-gradient-hero {
  background-image: linear-gradient(to bottom right, hsl(var(--teal-deep)), hsl(var(--teal-light)));
}

.bg-gradient-accent {
  background-image: linear-gradient(to right, hsl(var(--gold-warm)), hsl(var(--teal-light)));
}

.bg-gradient-light {
  background-image: linear-gradient(to bottom, #f9fafb, #e5f6ff);
}

.bg-gradient-dark {
  background-image: linear-gradient(to top, #f9fafb, #e5f6ff);
}

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

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out both;
}

.animate-fade-in-delayed {
  animation: fadeIn 1s ease-out 0.3s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Simple container helper for non-Tailwind output (fallback) */
.bas-prose p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* Scrolling Animation */
.animate-fade-in,
.animate-fade-in-delayed {
  opacity: 0;
  transform: translateY(20px);
}

.animate-fade-in.is-visible {
  animation: fadeIn 0.8s ease-out both;
}

.animate-fade-in-delayed.is-visible {
  animation: fadeIn 1s ease-out 0.3s both;
}


/* Contact Form 7 Tailwind Styling */
.contact-form input,
.contact-form textarea {
  @apply w-full rounded-xl border border-border px-4 py-3 text-sm bg-background
         focus:outline-none focus:ring-2 focus:ring-primary/60;
}

.contact-form textarea {
  @apply resize-none;
}

/* Removed .wpcf7-form-control w-full */

.contact-form .wpcf7-spinner {
  @apply mx-auto mt-4;
}

.contact-form .wpcf7-response-output {
  @apply mt-6 text-center rounded-lg py-3;
}