@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 261 100% 98.4%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142.1 76.2% 36.3%;
    --radius: 0.75rem;
    
    /* Voice Journal Theme Colors */
    --coral: 6 93% 71%;
    --coral-light: 6 93% 81%;
    --coral-dark: 6 93% 61%;
    --purple: 283 61% 54%;
    --purple-light: 283 61% 64%;
    --purple-dark: 283 61% 44%;
    --gradient-from: 6 93% 71%;
    --gradient-to: 283 61% 54%;
    
    /* Custom Mic Button Colors - Exact Hex Values */
    --mic-gradient-start: 0 45% 71%;    /* #FF6B6B */
    --mic-gradient-end: 275 43% 53%;    /* #9B59B6 */
    --mic-glow: 0 45% 71%;              /* #FF6B6B for glow effect */
    
    /* Button Breathing Animation Colors */
    --button-gradient-from: 0 0% 100%;   /* White */
    --button-gradient-to: 283 61% 54%;   /* Purple */
    --button-shadow-red: 0 84% 60%;      /* Red shadow */
    
    /* Coral Purple Theme for Voice Recorder */
    --coral-primary: 6 93% 71%;         /* #FF6B6B Coral */
    --purple-primary: 283 61% 54%;      /* #9B59B6 Purple */

    /* Beautiful shadows for voice recorder */
    --shadow-coral: 0 8px 32px -8px hsl(var(--coral-primary) / 0.25);
    --shadow-purple: 0 8px 32px -8px hsl(var(--purple-primary) / 0.25);
    --shadow-mixed: 0 12px 40px -12px hsl(var(--coral-primary) / 0.2), 0 8px 24px -8px hsl(var(--purple-primary) / 0.15);
  }

  .dark {
    --background: 261 100% 98.4%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142.1 76.2% 36.3%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-inter;
    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(261 100% 96%) 100%);
    min-height: 100vh;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-comfortaa;
  }
}

@layer components {
  .gradient-text {
    @apply bg-gradient-coral-purple bg-clip-text text-transparent;
  }
  
  .glass-card {
    @apply backdrop-blur-xl bg-white/70 border border-purple/20 rounded-2xl;
    box-shadow: 0 10px 30px -10px hsl(var(--purple-primary) / 0.14),
                0 12px 40px -12px hsl(var(--coral-primary) / 0.16),
                0 -6px 20px -12px hsl(var(--coral-primary) / 0.12),
                0 1px 3px hsl(var(--purple-primary) / 0.08);
  }
  
  .mic-button {
    @apply relative w-56 h-56 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 hover:scale-110 active:scale-95;
    background: linear-gradient(135deg, hsl(var(--button-gradient-from)), hsl(var(--button-gradient-to)));
    box-shadow: 0 0 40px hsl(var(--button-shadow-red) / 0.4), 0 0 80px hsl(var(--button-shadow-red) / 0.2), 0 16px 50px rgba(0,0,0,0.15);
    animation: breathe 2s ease-in-out infinite;
    border: 3px solid hsl(var(--button-gradient-to) / 0.3);
  }
  
  .mic-button::before {
    content: '';
    @apply absolute inset-0 rounded-full opacity-30;
    background: linear-gradient(135deg, hsl(var(--button-gradient-from)), hsl(var(--button-gradient-to)));
    animation: breathe 2s ease-in-out infinite;
  }
  
  .recording-pulse {
    animation: pulse-glow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background: linear-gradient(135deg, hsl(var(--coral-primary)), hsl(var(--purple-primary))) !important;
    box-shadow: 0 0 60px hsl(var(--coral-primary) / 0.6), 0 0 120px hsl(var(--coral-primary) / 0.3), 0 0 160px hsl(var(--coral-primary) / 0.1) !important;
  }

  /* Large Microphone Button Styles */
  .mic-button-large {
    @apply relative w-40 h-40 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 hover:scale-105 active:scale-95;
    background: linear-gradient(135deg, hsl(var(--button-gradient-from)), hsl(var(--button-gradient-to)));
    box-shadow: 0 0 30px hsl(var(--button-shadow-red) / 0.5), 0 0 60px hsl(var(--button-shadow-red) / 0.3), 0 12px 35px rgba(0,0,0,0.2);
    animation: breathe 2s ease-in-out infinite;
  }
  
  .mic-button-large::before {
    content: '';
    @apply absolute inset-0 rounded-full opacity-20;
    background: linear-gradient(135deg, hsl(var(--button-gradient-from)), hsl(var(--button-gradient-to)));
    animation: breathe 2s ease-in-out infinite;
  }
  
  .recording-pulse-large {
    animation: pulse-glow-large 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background: linear-gradient(135deg, hsl(var(--coral-primary)), hsl(var(--purple-primary))) !important;
    box-shadow: 0 0 40px hsl(var(--coral-primary) / 0.8), 0 0 80px hsl(var(--coral-primary) / 0.5), 0 0 120px hsl(var(--coral-primary) / 0.2) !important;
  }

  .recording-pulse-large::after {
    content: '';
    @apply absolute inset-0 rounded-full opacity-40;
    background: radial-gradient(circle, hsl(var(--coral-primary) / 0.3) 0%, transparent 70%);
    animation: pulse-glow-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .wave-bar {
    @apply w-1 bg-gradient-coral-purple rounded-full animate-wave;
    animation-delay: var(--delay, 0s);
  }
  
  /* Voice Recorder Theme Cards */
  .voice-card {
    @apply backdrop-blur-xl bg-white/70 border border-purple/20 rounded-2xl;
    box-shadow: 0 10px 30px -10px hsl(var(--purple-primary) / 0.14),
                0 12px 40px -12px hsl(var(--coral-primary) / 0.16),
                0 -6px 20px -12px hsl(var(--coral-primary) / 0.12),
                0 1px 3px hsl(var(--purple-primary) / 0.08);
  }
  
  /* Universal page/div surface to match page background */
  .surface {
    @apply bg-transparent; /* no border, no shadow, no blur; inherit app background */
  }
  
  /* Hide scrollbar while preserving scroll */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Safe-area helpers for mobile (iOS notches etc.) */
  .pt-safe { padding-top: env(safe-area-inset-top); }
  .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
  .px-safe { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  
  /* Enhanced Icon Gradients and Shadows with Hover Effects */
  .gradient-icon {
    background: linear-gradient(135deg, hsl(var(--coral-primary)), hsl(var(--purple-primary)));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 6px rgba(155, 89, 182, 0.4)) drop-shadow(0 1px 3px rgba(255, 107, 107, 0.3));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gradient-icon:hover {
    filter: drop-shadow(0 6px 12px rgba(155, 89, 182, 0.6)) drop-shadow(0 3px 8px rgba(255, 107, 107, 0.5));
    transform: scale(1.1) rotate(5deg);
  }
  
  .coral-icon {
    color: hsl(var(--coral-primary));
    filter: drop-shadow(0 3px 6px rgba(255, 107, 107, 0.5)) drop-shadow(0 1px 3px rgba(255, 107, 107, 0.8));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .coral-icon:hover {
    filter: drop-shadow(0 6px 12px rgba(255, 107, 107, 0.7)) drop-shadow(0 3px 8px rgba(255, 107, 107, 0.9));
    transform: scale(1.08) translateY(-2px);
  }
  
  .purple-icon {
    color: hsl(var(--purple-primary));
    filter: drop-shadow(0 3px 6px rgba(155, 89, 182, 0.5)) drop-shadow(0 1px 3px rgba(155, 89, 182, 0.8));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .purple-icon:hover {
    filter: drop-shadow(0 6px 12px rgba(155, 89, 182, 0.7)) drop-shadow(0 3px 8px rgba(155, 89, 182, 0.9));
    transform: scale(1.08) translateY(-2px);
  }
  
  /* Enhanced Icon Container Styles */
  .icon-container {
    background: linear-gradient(135deg, 
      hsl(var(--purple-primary) / 0.08), 
      hsl(var(--coral-primary) / 0.08)
    );
    border: 1px solid hsl(var(--purple-primary) / 0.15);
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 4px 16px hsl(var(--purple-primary) / 0.1),
      0 2px 8px hsl(var(--coral-primary) / 0.05);
  }
  
  .icon-container:hover {
    background: linear-gradient(135deg, 
      hsl(var(--purple-primary) / 0.15), 
      hsl(var(--coral-primary) / 0.15)
    );
    border-color: hsl(var(--purple-primary) / 0.3);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
      0 8px 24px hsl(var(--purple-primary) / 0.2),
      0 4px 12px hsl(var(--coral-primary) / 0.15);
  }
}