@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.
 *


 */