@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-brown: var(--brown);
  --color-brown-foreground: var(--brown-foreground);
  --color-cream: var(--cream);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  --font-button: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 10px);
  --radius-3xl: calc(var(--radius) + 18px);
}

:root {
  color-scheme: light;
  --radius: 1rem;

  --background: #ffffff;
  --foreground: #1b4332;

  --card: #ffffff;
  --card-foreground: #1b4332;

  --popover: #ffffff;
  --popover-foreground: #1b4332;

  /* Dark Forest Green */
  --primary: #1b4332;
  --primary-foreground: #f8f6f1;

  /* Fresh Green */
  --secondary: #40916c;
  --secondary-foreground: #ffffff;

  --muted: #f5f5f5;
  --muted-foreground: #5b6b62;

  /* Light mint accent */
  --accent: #95d5b2;
  --accent-foreground: #1b4332;

  /* Earthy Brown */
  --brown: #7f5539;
  --brown-foreground: #f8f6f1;

  /* Cream */
  --cream: #f8f6f1;

  --destructive: #b3261e;

  --border: #e7e4dc;
  --input: #e7e4dc;
  --ring: #40916c;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
  }
}

@layer utilities {
  .font-display {
    font-family: var(--font-display);
  }
  .font-button {
    font-family: var(--font-button);
  }

  /* Animated gradient used for hero / accents */
  .animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 12s ease infinite;
  }

  .text-balance {
    text-wrap: balance;
  }

  .glass {
    background: color-mix(in srgb, #ffffff 70%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}

.animate-floaty {
  animation: floaty 6s ease-in-out infinite;
}

.animate-floaty-slow {
  animation: floaty 9s ease-in-out infinite;
}