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

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
  scroll-behavior: smooth;
}

/* Apply to html and body to ensure the viewport is correctly managed */
html {
  height: 100%; /* Ensure html takes full height for body to use 100% height */
}

body {
  min-height: 100%; /* Ensure body takes at least full viewport height */
  margin: 0;
  /* overflow: hidden; -- Removed to allow body to scroll if necessary, relying on main's overflow-y-auto */
}


@layer base {
  :root {
    /* Light Theme - Watermelon */
    --background: 350 100% 97%; /* Very pale pink, almost white */
    --foreground: 140 40% 25%; /* Dark muted green for text */
    
    --card: 0 0% 100%; /* White cards for contrast */
    --card-foreground: 140 40% 20%; /* Darker green text on cards */
    
    --popover: 0 0% 100%; /* White popovers */
    --popover-foreground: 140 40% 20%; /* Dark green text on popovers */
    
    --primary: 350 80% 60%; /* Watermelon red/pink */
    --primary-foreground: 0 0% 100%; /* White text on primary */
    
    --secondary: 350 70% 75%; /* Lighter pink for secondary elements */
    --secondary-foreground: 350 80% 30%; /* Darker pink for contrast on light pink */
    
    --muted: 120 30% 92%; /* Very light, desaturated green for muted backgrounds */
    --muted-foreground: 140 30% 45%; /* Medium muted green for muted text */
    
    --accent: 130 55% 50%; /* Watermelon rind green */
    --accent-foreground: 0 0% 100%; /* White text on accent green */
    
    --destructive: 0 70% 50%; /* Standard destructive red */
    --destructive-foreground: 0 0% 98%; /* White text on destructive */
    
    --border: 140 20% 80%; /* Light green-gray border */
    --input: 120 20% 94%; /* Very light green input background */
    --ring: 350 80% 65%; /* Primary for ring, slightly lighter */
    
    --chart-1: 350 80% 60%; /* Watermelon Red */
    --chart-2: 130 55% 50%; /* Watermelon Green */
    --chart-3: 350 70% 75%; /* Lighter Watermelon Red */
    --chart-4: 130 45% 65%; /* Lighter Watermelon Green */
    --chart-5: 0 0% 60%; /* Neutral Grey */
    --radius: 0.5rem;

    --sidebar-background: 350 100% 97%; /* Same as main background */
    --sidebar-foreground: 140 40% 25%; /* Same as main foreground */
    --sidebar-primary: 350 80% 60%; /* Primary Red */
    --sidebar-primary-foreground: 0 0% 100%; /* White */
    --sidebar-accent: 130 55% 50%; /* Accent Green */
    --sidebar-accent-foreground: 0 0% 100%; /* White */
    --sidebar-border: 140 20% 80%; /* Light green-gray border */
    --sidebar-ring: 350 80% 65%;

    --shimmer-highlight: 0 0% 100%; /* White for shimmer effect */

    /* Seed pattern color for light theme */
    --seed-color: hsl(var(--foreground) / 0.08); 
  }

  .dark {
    /* Dark Theme - Watermelon */
    --background: 140 35% 15%; /* Dark watermelon green */
    --foreground: 350 80% 90%; /* Light pink for text */

    --card: 140 30% 20%; /* Slightly lighter dark green for cards */
    --card-foreground: 350 75% 88%; /* Light pink text on cards */

    --popover: 140 35% 10%; /* Very dark green for popovers */
    --popover-foreground: 350 80% 90%; /* Light pink text on popovers */

    --primary: 350 85% 68%; /* Brighter watermelon red/pink */
    --primary-foreground: 0 0% 100%; /* White text on primary */

    --secondary: 350 60% 40%; /* Muted dark pink */
    --secondary-foreground: 350 80% 85%; /* Light pink text for dark pink bg */

    --muted: 140 25% 22%; /* Darker green for muted backgrounds */
    --muted-foreground: 120 25% 65%; /* Medium light green for muted text */

    --accent: 130 60% 58%; /* Brighter watermelon rind green */
    --accent-foreground: 140 40% 15%; /* Dark green text for bright green accent */

    --destructive: 0 70% 60%; /* Brighter destructive red for dark mode */
    --destructive-foreground: 0 0% 98%;

    --border: 140 20% 30%; /* Subtle dark green border */
    --input: 140 25% 22%; /* Dark green input background */
    --ring: 350 85% 70%; /* Primary for ring, adjusted for dark mode */

    --chart-1: 350 85% 68%; /* Brighter Watermelon Red */
    --chart-2: 130 60% 58%; /* Brighter Watermelon Green */
    --chart-3: 350 75% 78%; /* Lighter version of dark primary red */
    --chart-4: 130 50% 70%; /* Lighter version of dark accent green */
    --chart-5: 0 0% 70%; /* Light Grey */

    --sidebar-background: 140 35% 15%; 
    --sidebar-foreground: 350 80% 90%; 
    --sidebar-primary: 350 85% 68%; 
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 130 60% 58%; 
    --sidebar-accent-foreground: 140 40% 15%;
    --sidebar-border: 140 20% 30%;
    --sidebar-ring: 350 85% 70%;

    --shimmer-highlight: 0 0% 100%; /* White for shimmer effect */
    
    /* Rind stripe pattern color for dark theme */
    --rind-stripe-color: hsla(var(--foreground), 0.025);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    @apply transition-colors duration-300;
    display: flex;
    flex-direction: column;

    /* Light theme default background pattern (seeds) */
    background-image:
      radial-gradient(ellipse 1.5px 2.5px at 70% 30%, var(--seed-color) 100%, transparent 101%),
      radial-gradient(ellipse 1.5px 2.5px at 30% 70%, var(--seed-color) 100%, transparent 101%),
      radial-gradient(ellipse 1px 2px at 50% 50%, var(--seed-color) 100%, transparent 101%),
      radial-gradient(ellipse 1.5px 2.5px at 20% 10%, var(--seed-color) 100%, transparent 101%),
      radial-gradient(ellipse 1.5px 2.5px at 80% 90%, var(--seed-color) 100%, transparent 101%);
    background-size: 70px 70px; /* Sparser seeds */
    background-repeat: repeat;
    background-attachment: fixed; /* Important for the pattern to stay fixed */
  }

  .dark body {
    /* Dark theme background pattern (rind lines) */
    /* The bg-background for .dark is already applied by Tailwind */
    background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 20px, /* Width of the main background color part of the stripe */
      var(--rind-stripe-color) 20px, /* Start of the stripe */
      var(--rind-stripe-color) 40px  /* End of the stripe, then repeats */
    );
    background-attachment: fixed; /* Important for the pattern to stay fixed */
  }
}

.scroll-snap-y-proximity {
  scroll-snap-type: y proximity;
}
.snap-start {
  scroll-snap-align: start;
}


/* Print styles */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    height: auto; 
    overflow: auto; 
    background-image: none !important; /* Remove patterns for printing */
  }
  .no-print {
    display: none !important;
  }
  html.dark { /* Force light theme for print */
    --background: 0 0% 100% !important; /* White */
    --foreground: 0 0% 0% !important; /* Black */
    --card: 0 0% 98% !important; 
    --card-foreground: 0 0% 0% !important;
    
    --primary: 350 80% 60% !important; /* Watermelon Red */
    --primary-foreground: 0 0% 100% !important; /* White */
    --accent: 130 55% 50% !important; /* Watermelon Green */
    --accent-foreground: 0 0% 100% !important; /* White */
    --muted-foreground: 0 0% 40% !important;
  }
  * {
    color: black !important;
    background-color: white !important;
    box-shadow: none !important;
  }
  a {
    text-decoration: none !important;
    color: hsl(var(--primary)) !important; 
  }
   ::-webkit-scrollbar {
    display: none;
  }
  .scroll-snap-y-proximity {
    scroll-snap-type: none;
  }
  main {
    overflow-y: visible !important; 
    height: auto !important;
  }
  section {
    min-height: auto !important; 
    scroll-snap-align: none !important;
    page-break-after: always; 
  }
  section:last-child {
    page-break-after: avoid;
  }
}

/* Morphing Gradient Bubbles for Hero Section */
.hero-bubbles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  z-index: 1; 
}

.bubble {
  position: absolute;
  border-radius: 50%; 
  background: linear-gradient(45deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary)));
  background-size: 300% 300%; 
  animation: animateBubbleMotion 25s ease-in-out infinite, animateBubbleGradient 15s ease-in-out infinite;
  opacity: 0; 
  filter: blur(40px); 
  will-change: transform, opacity; 
}

@keyframes animateBubbleGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes animateBubbleMotion {
  0%, 100% {
    transform: translateY(20px) translateX(0px) scale(1);
    opacity: 0.2; 
  }
  25% {
    transform: translateY(0px) translateX(15px) scale(1.05);
    opacity: 0.4; 
  }
  50% {
    transform: translateY(-20px) translateX(0px) scale(1.1);
    opacity: 0.5; 
  }
  75% {
    transform: translateY(0px) translateX(-15px) scale(1.05);
    opacity: 0.4; 
  }
}

.bubble-1 {
  width: 35vw; 
  height: 35vw;
  max-width: 400px; max-height: 400px; 
  min-width: 150px; min-height: 150px; 
  left: 10%;
  top: 15%;
  animation-delay: 0s, 0s; 
}

.bubble-2 {
  width: 25vw;
  height: 25vw;
  max-width: 300px; max-height: 300px;
  min-width: 100px; min-height: 100px;
  left: 65%;
  top: 55%;
  animation-delay: -5s, -2s; 
  animation-duration: 30s, 18s;
}

.bubble-3 {
  width: 30vw;
  height: 30vw;
  max-width: 350px; max-height: 350px;
  min-width: 120px; min-height: 120px;
  left: 30%;
  top: 30%;
  animation-delay: -10s, -4s;
  animation-duration: 22s, 14s;
}

.bubble-4 {
  width: 20vw;
  height: 20vw;
  max-width: 250px; max-height: 250px;
  min-width: 80px; min-height: 80px;
  left: 5%;
  top: 70%;
  animation-delay: -15s, -6s;
  animation-duration: 35s, 20s;
}

.bubble-5 {
  width: 28vw;
  height: 28vw;
  max-width: 320px; max-height: 320px;
  min-width: 110px; min-height: 110px;
  left: 75%;
  top: 5%;
  animation-delay: -20s, -8s;
  animation-duration: 28s, 16s;
}

/* Custom line-clamp utilities */
@layer utilities {
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}