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

/* VeryWellMind-inspired Wellness Theme */
:root {
  /* Primary Colors */
  --primary-teal: #0d9488;
  --primary-teal-light: #14b8a6;
  --primary-teal-dark: #0f766e;

  /* Accent Colors */
  --accent-lavender: #a855f7;
  --accent-coral: #ff6b6b;
  --accent-sage: #7a8b63;

  /* Background Colors */
  --bg-cream: #fdf9f3;
  --bg-soft: #fafaf9;
  --bg-white: #ffffff;

  /* Text Colors */
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #78716c;

  /* Foreground/Background */
  --foreground-rgb: 28, 25, 23;
  --background-rgb: 253, 249, 243;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 250, 250, 249;
    --background-rgb: 28, 25, 23;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  font-feature-settings: 'rlig' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Wellness Typography */
@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-display tracking-tight;
  }

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

  h2 {
    @apply text-3xl md:text-4xl font-bold;
  }

  h3 {
    @apply text-xl md:text-2xl font-semibold;
  }

  p {
    @apply leading-relaxed;
  }
}

/* Custom Components */
@layer components {
  /* Wellness Card Style */
  .wellness-card {
    @apply bg-white rounded-2xl p-6 shadow-soft transition-all duration-300;
  }

  .wellness-card:hover {
    @apply shadow-soft-lg -translate-y-1;
  }

  /* Soft Button Styles */
  .btn-primary {
    @apply bg-teal-600 text-white px-6 py-3 rounded-full font-medium
           hover:bg-teal-700 transition-all duration-300
           shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply bg-white text-teal-700 px-6 py-3 rounded-full font-medium
           border-2 border-teal-200 hover:border-teal-300
           hover:bg-teal-50 transition-all duration-300;
  }

  .btn-soft {
    @apply bg-cream-100 text-warmgray-700 px-6 py-3 rounded-full font-medium
           hover:bg-cream-200 transition-all duration-300;
  }

  /* Category Pill */
  .category-pill {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
           transition-all duration-200;
  }

  .category-pill-teal {
    @apply bg-teal-100 text-teal-800 hover:bg-teal-200;
  }

  .category-pill-lavender {
    @apply bg-lavender-100 text-lavender-800 hover:bg-lavender-200;
  }

  .category-pill-coral {
    @apply bg-coral-100 text-coral-800 hover:bg-coral-200;
  }

  .category-pill-sage {
    @apply bg-sage-100 text-sage-800 hover:bg-sage-200;
  }

  /* Input Styles */
  .input-wellness {
    @apply w-full px-4 py-3 rounded-xl border-2 border-warmgray-200
           bg-white focus:outline-none focus:border-teal-400
           focus:ring-4 focus:ring-teal-100 transition-all duration-200
           placeholder:text-warmgray-400;
  }

  /* Section Styles */
  .section-wellness {
    @apply py-16 md:py-24;
  }

  /* Gradient Backgrounds */
  .bg-gradient-wellness {
    background: linear-gradient(135deg, #f0fdfa 0%, #faf5ff 50%, #fdf9f3 100%);
  }

  .bg-gradient-hero {
    background:
      radial-gradient(circle at 30% 20%, rgba(20, 184, 166, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
      linear-gradient(180deg, #fdf9f3 0%, #ffffff 100%);
  }

  /* Decorative Elements */
  .blob-teal {
    @apply absolute rounded-full bg-teal-200/30 blur-3xl;
  }

  .blob-lavender {
    @apply absolute rounded-full bg-lavender-200/30 blur-3xl;
  }
}

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

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

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

  .animate-pulse-soft {
    animation: pulse-soft 4s ease-in-out infinite;
  }

  @keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f4;
}

::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* Selection Color */
::selection {
  background-color: rgba(20, 184, 166, 0.2);
  color: #0f766e;
}

/* ===== RESPONSIVE UTILITIES ===== */

/* Mobile-first responsive container */
.container-responsive {
  @apply w-full px-4 mx-auto;
  max-width: 100%;
}

@media (min-width: 640px) {
  .container-responsive {
    @apply px-6;
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container-responsive {
    @apply px-8;
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container-responsive {
    max-width: 1280px;
  }
}

/* Responsive Text */
.text-responsive-xs {
  @apply text-xs sm:text-sm;
}

.text-responsive-sm {
  @apply text-sm sm:text-base;
}

.text-responsive-base {
  @apply text-base sm:text-lg md:text-xl;
}

.text-responsive-lg {
  @apply text-lg sm:text-xl md:text-2xl;
}

.text-responsive-xl {
  @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
}

.text-responsive-2xl {
  @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
}

/* Responsive Spacing */
.space-responsive {
  @apply space-y-4 sm:space-y-6 md:space-y-8;
}

.padding-responsive {
  @apply p-4 sm:p-6 md:p-8 lg:p-10;
}

.margin-responsive {
  @apply m-4 sm:m-6 md:m-8;
}

/* Responsive Grid */
.grid-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6;
}

.grid-responsive-2 {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6;
}

.grid-responsive-3 {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6;
}

/* Hide/Show on devices */
.mobile-only {
  @apply block sm:hidden;
}

.tablet-up {
  @apply hidden sm:block;
}

.desktop-only {
  @apply hidden lg:block;
}

/* Responsive Card */
.card-responsive {
  @apply bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-sm hover:shadow-md transition-all;
}

/* Responsive Button */
.btn-responsive {
  @apply px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-base rounded-lg sm:rounded-xl;
}

/* Touch-friendly targets for mobile */
@media (max-width: 640px) {
  button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
  }

  input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* Responsive Navigation */
.nav-responsive {
  @apply flex flex-col sm:flex-row items-center gap-2 sm:gap-4;
}

/* Safe area for mobile notches */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Responsive Modal */
.modal-responsive {
  @apply w-[95vw] sm:w-[85vw] md:w-[75vw] lg:w-[60vw] max-w-4xl;
  max-height: 90vh;
}

/* Responsive Chat */
.chat-container {
  @apply h-[50vh] sm:h-[60vh] md:h-[70vh] overflow-y-auto;
}

.chat-input-container {
  @apply fixed bottom-0 left-0 right-0 sm:relative p-4 bg-white border-t sm:border-t-0;
}

/* Landscape mode adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .chat-container {
    height: 40vh;
  }

  .section-wellness {
    @apply py-8;
  }
}