/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.2
Text Domain:  Avada
*/

/* App.css */
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* index.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Forest-inspired color palette */
    --background: 45 30% 97%;
    --foreground: 150 20% 15%;

    --card: 0 0% 100%;
    --card-foreground: 150 20% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 150 20% 15%;

    /* Deep forest green */
    --primary: 145 45% 32%;
    --primary-foreground: 45 30% 97%;

    /* Warm cream */
    --secondary: 45 40% 94%;
    --secondary-foreground: 150 20% 15%;

    /* Muted sage */
    --muted: 145 15% 90%;
    --muted-foreground: 150 10% 45%;

    /* Light sage accent */
    --accent: 145 25% 88%;
    --accent-foreground: 150 20% 15%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 145 15% 85%;
    --input: 145 15% 85%;
    --ring: 145 45% 32%;

    --radius: 0.75rem;

    /* Custom tokens */
    --forest-dark: 150 35% 22%;
    --forest-light: 145 35% 45%;
    --cream: 45 40% 96%;
    --cream-dark: 40 25% 90%;
    --earth: 30 35% 35%;
    --leaf: 85 45% 50%;
    --contact-bg: 0 0% 96%;
    --button-hero: 87 74% 41%;
    --button-hero-foreground: 0 0% 100%;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(150 35% 22% / 0.85), hsl(145 45% 32% / 0.75));
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(45 40% 98%));
    --gradient-cta: linear-gradient(135deg, hsl(145 45% 32%), hsl(145 35% 40%));

    /* Shadows */
    --shadow-sm: 0 2px 8px hsl(150 20% 15% / 0.06);
    --shadow-md: 0 4px 20px hsl(150 20% 15% / 0.08);
    --shadow-lg: 0 8px 40px hsl(150 20% 15% / 0.12);
    --shadow-card: 0 4px 24px hsl(145 45% 32% / 0.08);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --font-sans: Raleway, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  }

  .dark {
    --background: 150 25% 8%;
    --foreground: 45 30% 95%;

    --card: 150 20% 12%;
    --card-foreground: 45 30% 95%;

    --popover: 150 20% 12%;
    --popover-foreground: 45 30% 95%;

    --primary: 145 45% 45%;
    --primary-foreground: 150 25% 8%;

    --secondary: 150 15% 18%;
    --secondary-foreground: 45 30% 95%;

    --muted: 150 15% 18%;
    --muted-foreground: 145 10% 60%;

    --accent: 150 15% 18%;
    --accent-foreground: 45 30% 95%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 100%;

    --border: 150 15% 20%;
    --input: 150 15% 20%;
    --ring: 145 45% 45%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --font-sans: Raleway, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  h1 {
    @apply font-display text-4xl md:text-5xl lg:text-6xl font-bold leading-tight tracking-tight;
  }

  h2 {
    @apply font-display text-3xl md:text-4xl font-semibold leading-snug;
  }

  h3 {
    @apply font-display text-2xl md:text-3xl font-semibold leading-snug;
  }

  h4 {
    @apply font-display text-xl md:text-2xl font-medium leading-normal;
  }

  p {
    @apply font-sans text-2xl leading-relaxed;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .gradient-hero {
    background: var(--gradient-hero);
  }

  .gradient-cta {
    background: var(--gradient-cta);
  }

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

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