/* Remove font import - handled in HTML for better performance */

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

@layer base {
  :root {
    /* Light, airy background with subtle warmth */
    --background: 210 40% 98%;
    --foreground: 220 15% 25%;

    /* Cards with soft shadows and rounded edges */
    --card: 0 0% 100%;
    --card-foreground: 220 15% 25%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 25%;

    /* Black primary */
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;

    /* Soft secondary with pastel tones */
    --secondary: 150 30% 92%;
    --secondary-foreground: 150 25% 35%;

    /* Gentle muted tones */
    --muted: 210 30% 96%;
    --muted-foreground: 215 15% 55%;

    /* Soft accent - pastel green */
    --accent: 150 40% 85%;
    --accent-foreground: 150 30% 30%;

    /* Warm destructive */
    --destructive: 0 70% 70%;
    --destructive-foreground: 0 0% 98%;

    /* Subtle borders */
    --border: 220 20% 88%;
    --input: 220 20% 88%;
    --ring: 270 40% 65%;

    /* Increased radius for softer edges */
    --radius: 0.75rem;

    /* Pastel color palette */
    --pastel-green: hsl(120 50% 85%);
    --pastel-purple: hsl(270 50% 85%);
    --pastel-yellow: hsl(50 80% 85%);
    --pastel-blue: hsl(210 60% 85%);
    --pastel-pink: hsl(330 60% 85%);

    /* Soft shadows */
    --shadow-soft: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px -4px rgba(0, 0, 0, 0.15);

    /* Purple gradient */
    --gradient-purple: linear-gradient(135deg, hsl(270 60% 70%), hsl(290 60% 80%));

    --sidebar-background: 210 30% 98%;
    --sidebar-foreground: 220 15% 30%;
    --sidebar-primary: 270 40% 65%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 150 30% 95%;
    --sidebar-accent-foreground: 150 25% 35%;
    --sidebar-border: 220 20% 90%;
    --sidebar-ring: 270 40% 65%;
  }

  .dark {
    --background: 240 6% 10%;
    --foreground: 0 0% 98%;

    --card: 240 6% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 240 6% 10%;
    --popover-foreground: 0 0% 98%;

    --primary: 84 100% 59%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 4.8% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 4.8% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 4.8% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 4.8% 15.9%;
    --input: 240 4.8% 15.9%;
    --ring: 84 100% 59%;

    --sidebar-background: 240 6% 10%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 84 100% 59%;
    --sidebar-primary-foreground: 240 5.9% 10%;
    --sidebar-accent: 240 4.8% 15.9%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 4.8% 15.9%;
    --sidebar-ring: 84 100% 59%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: 'Inter', sans-serif;
  }

  html {
    scroll-behavior: smooth;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-inter font-bold;
  }
}

@layer components {
  .gradient-text {
    @apply text-brand-black;
  }
  
  .gradient-bg {
    @apply bg-pastel-green;
  }

  /* Modern card styling with soft shadows */
  .card-modern {
    @apply bg-white rounded-2xl shadow-soft hover:shadow-medium transition-all duration-300;
  }

  .card-pastel-green {
    @apply bg-pastel-green/20 border border-pastel-green/30 rounded-2xl;
  }

  .card-pastel-purple {
    @apply bg-pastel-purple/20 border border-pastel-purple/30 rounded-2xl;
  }

  .card-pastel-yellow {
    @apply bg-pastel-yellow/20 border border-pastel-yellow/30 rounded-2xl;
  }

  .card-shadow {
    @apply shadow-soft hover:shadow-medium transition-shadow duration-300;
  }

  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24;
  }
  
  .btn-modern {
    @apply bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-xl transition-all duration-200 shadow-soft hover:shadow-medium hover:-translate-y-0.5;
  }
  
  .btn-outline-modern {
    @apply border border-border/60 text-foreground px-6 py-3 rounded-xl font-medium hover:bg-accent/50 transition-all duration-200 shadow-soft hover:shadow-medium;
  }

  /* Gamification elements */
  .score-badge {
    @apply bg-gradient-to-r from-pastel-purple to-pastel-blue text-white px-4 py-2 rounded-full font-bold text-sm shadow-soft;
  }

  .progress-pill {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }

  /* Instagram embed fixes */
  .instagram-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    min-height: 600px !important;
    overflow: visible !important;
    position: relative !important;
    display: block !important;
  }
  
  .instagram-media iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    min-height: 600px !important;
  }
  
  /* Override any parent container constraints */
  .instagram-media,
  .instagram-media * {
    box-sizing: border-box !important;
  }
  
  /* Ensure the embed container doesn't constrain width */
  div:has(.instagram-media) {
    width: 100% !important;
    max-width: none !important;
    min-width: auto !important;
  }
  
  /* Force full width rendering */
  .instagram-media {
    transform: translateX(0) !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Blinking cursor animation */
  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  
  .animate-blink {
    animation: blink 1s step-end infinite;
  }
}

/* Instagram embed responsive layout */
.instagram-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.instagram-embed {
  flex: 0 1 400px;
  max-width: 400px;
  min-width: 300px;
}

/* Spoon pattern background with larger spacing and reduced opacity */
.spoon-pattern {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30,50 C30,40 40,30 50,30 C60,30 70,40 70,50 C70,60 65,68 60,70 C58,71 56,71 54,70 L54,80 C54,82 52,84 50,84 C48,84 46,82 46,80 L46,70 C44,71 42,71 40,70 C35,68 30,60 30,50 Z' fill='%23555555' fill-opacity='0.05' /%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.05;
  transform: rotate(-5deg) scale(1.5);
}