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

/* Google Fonts - Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Custom CSS Variables for Dark Theme */
:root {
  --coral-bloom: #ff6b6b;
  --terracotta-warm: #e55d5d;
  --sage-green: #87a96b;
  --forest-deep: #2d4a3a;
  --rose-dust: #f4a6a6;
  --cream-white: #fff8f0;
  --earth-brown: #8b6f47;
  --soft-purple: #a8a2c7;
  --ocean-blue: #7bb3d3;

  /* Dark mode colors */
  --dark-primary: #1a1527;
  --dark-secondary: #2d2438;
  --dark-accent: #3f3449;
  --dark-coral: #d85a5a;
  --dark-rose: #c7858e;
  --warm-cream: #f5f1e8;
  --soft-cream: #e8e2d5;
  --warm-gray: #a69b8c;
  --dark-purple: #6b5b8a;
}

/* Animation Keyframes */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes bloom {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
    opacity: 0.5;
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translateX(0px) translateY(0px);
  }
  33% {
    transform: translateX(10px) translateY(-10px);
  }
  66% {
    transform: translateX(-5px) translateY(5px);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Animation Classes */
.animate-float {
  animation: float 6s ease-in-out infinite;
}
.animate-bloom {
  animation: bloom 8s ease-in-out infinite;
}
.animate-drift {
  animation: drift 10s ease-in-out infinite;
}
.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Component Classes */
@layer components {
  .gradient-coral {
    background: linear-gradient(
      to right,
      var(--coral-bloom),
      var(--terracotta-warm)
    );
  }

  .dark .gradient-coral {
    background: linear-gradient(to right, var(--dark-coral), var(--dark-rose));
  }

  .gradient-bg {
    background: linear-gradient(
      to bottom right,
      var(--cream-white),
      rgba(244, 166, 166, 0.2)
    );
  }

  .dark .gradient-bg {
    background: linear-gradient(
      135deg,
      var(--dark-primary) 0%,
      var(--dark-secondary) 100%
    );
  }

  .glass-card {
    background: rgba(255, 248, 240, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(135, 169, 107, 0.2);
  }

  .dark .glass-card {
    background: rgba(45, 36, 56, 0.9);
    border: 1px solid rgba(216, 90, 90, 0.2);
  }

  .feature-card {
    background: linear-gradient(
      to bottom right,
      rgba(244, 166, 166, 0.2),
      rgba(255, 107, 107, 0.1)
    );
  }

  .dark .feature-card {
    background: linear-gradient(
      to bottom right,
      rgba(63, 52, 73, 0.3),
      rgba(216, 90, 90, 0.2)
    );
  }

  .feature-card-sage {
    background: linear-gradient(
      to bottom right,
      rgba(135, 169, 107, 0.2),
      rgba(45, 74, 58, 0.1)
    );
  }

  .dark .feature-card-sage {
    background: linear-gradient(
      to bottom right,
      rgba(199, 133, 142, 0.2),
      rgba(63, 52, 73, 0.2)
    );
  }

  .feature-card-purple {
    background: linear-gradient(
      to bottom right,
      rgba(168, 162, 199, 0.2),
      rgba(123, 179, 211, 0.1)
    );
  }

  .dark .feature-card-purple {
    background: linear-gradient(
      to bottom right,
      rgba(63, 52, 73, 0.2),
      rgba(166, 155, 140, 0.1)
    );
  }
}

/* General body styles */
body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f3f4f6; /* Light gray background */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures body takes full viewport height for sticky footer */
  transition: all 0.5s ease;
}

/* Dark mode body */
.dark body {
  background: linear-gradient(
    135deg,
    var(--dark-primary) 0%,
    var(--dark-secondary) 100%
  );
}

/* Dark mode text color overrides */
.dark .text-forest-deep {
  color: var(--warm-cream) !important;
}
.dark .text-earth-brown {
  color: var(--soft-cream) !important;
}
.dark .text-coral-bloom {
  color: var(--dark-coral) !important;
}
.dark .text-sage-green {
  color: var(--dark-rose) !important;
}
.dark .text-soft-purple {
  color: var(--warm-gray) !important;
}

/* Dark mode background overrides */
.dark .bg-cream-white {
  background-color: var(--dark-secondary) !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */