@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Comic+Neue:wght@300;400;700&family=Bubblegum+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
  --font-playful: 'Fredoka', 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
  --font-bubbly: 'Fredoka', 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer base {
  :root {
    --background: 210 40% 99%;
    --foreground: 220 25% 15%;

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

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

    --primary: 230 70% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 200 60% 60%;
    --secondary-foreground: 0 0% 100%;

    --muted: 210 20% 94%;
    --muted-foreground: 220 15% 45%;

    --accent: 280 75% 65%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 85% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 20% 87%;
    --input: 214 20% 87%;
    --ring: 230 70% 55%;

    --radius: 0.8rem;

    /* Theme 3 – Clean Neo Design */
    --theme3-primary: 230 70% 55%;
    --theme3-primary-foreground: 0 0% 100%;
    --theme3-secondary: 200 60% 60%;
    --theme3-secondary-foreground: 0 0% 100%;
    --theme3-accent: 280 75% 65%;
    --theme3-accent-foreground: 0 0% 100%;

    --theme3-gradient: linear-gradient(
      135deg,
      hsl(230 70% 55% / 0.95),
      hsl(280 75% 65% / 0.9)
    );

    /* Dashboard & Editor */
    --dashboard-sidebar: 210 30% 96%;
    --dashboard-border: 214 20% 87%;
    --editor-bg: 0 0% 98%;

    /* Shadows */
    --shadow-soft: 0 4px 20px -2px hsl(230 70% 55% / 0.15);
    --shadow-card: 0 8px 30px -5px hsl(220 20% 15% / 0.08);

    /* Animations */
    --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    --background: 220 25% 12%;
    --foreground: 220 20% 95%;

    --card: 220 20% 16%;
    --card-foreground: 220 20% 95%;

    --popover: 220 20% 16%;
    --popover-foreground: 220 20% 95%;

    --primary: 230 70% 60%;
    --primary-foreground: 0 0% 100%;

    --secondary: 200 60% 65%;
    --secondary-foreground: 0 0% 100%;

    --muted: 220 20% 22%;
    --muted-foreground: 220 20% 75%;

    --accent: 280 75% 70%;
    --accent-foreground: 220 25% 12%;

    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 20% 22%;
    --input: 220 20% 22%;
    --ring: 230 70% 60%;

    /* Dark Theme 3 */
    --theme3-primary: 230 70% 62%;
    --theme3-secondary: 200 60% 67%;
    --theme3-accent: 280 75% 72%;

    --theme3-gradient: linear-gradient(
      135deg,
      hsl(230 70% 62% / 0.95),
      hsl(280 75% 72% / 0.9)
    );

    --dashboard-sidebar: 220 25% 14%;
    --dashboard-border: 220 20% 22%;
    --editor-bg: 220 25% 16%;

    --shadow-soft: 0 4px 20px -2px hsl(230 70% 60% / 0.2);
    --shadow-card: 0 8px 30px -5px hsl(0 0% 0% / 0.35);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for fixed header */
    overflow-x: hidden;
  }
  body {
    @apply bg-background text-foreground;
    overflow-x: hidden;
    /* max-width: 100vw; */
  }
}

/* Custom thin scrollbar styles */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 80%) transparent;
}

/* WebKit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: hsl(0 0% 80%);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0 0% 70%);
}

/* Dark mode scrollbar */
.dark *::-webkit-scrollbar-thumb {
  background-color: hsl(0 0% 40%);
}

.dark *::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0 0% 50%);
}

body {
  @apply bg-background text-foreground;
  transition: background-color 0.3s ease;
}

.dark body {
  transition: background-color 0.3s ease;
}

/* FAQ Image Custom Shape */
.faq-image-shape {
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Alternative organic blob shape */
.faq-image-shape-blob {
  clip-path: ellipse(45% 50% at 50% 50%);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}
.header-curve {
  --mask:
    radial-gradient(178.89px at 50% calc(100% - 240px), #000 99%, #0000 101%)
      calc(50% - 160px) 0/320px 100%,
    radial-gradient(178.89px at 50% calc(100% + 160px), #0000 99%, #000 101%)
      50% calc(100% - 80px) / 320px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

/* Kindergarten Theme Custom Animations */
@keyframes rainbow-text {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(0.3) translateY(-50px);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes blob {
  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

.animate-rainbow {
  animation: rainbow-text 3s linear infinite;
}

.animate-bounce-in {
  animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-blob {
  animation: blob 8s ease-in-out infinite;
}

/* Playful hover effects for kindergarten theme */
.playful-hover {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.playful-hover:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(
    135deg,
    hsl(18 82% 60%),
    hsl(45 95% 65%),
    hsl(200 85% 65%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Smooth transitions for all interactive elements */
button,
a,
.interactive {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fun shadow effects */
.shadow-playful {
  box-shadow:
    0 4px 6px -1px rgba(255, 159, 64, 0.3),
    0 2px 4px -1px rgba(54, 162, 235, 0.2);
}

.shadow-playful-lg {
  box-shadow:
    0 10px 15px -3px rgba(255, 159, 64, 0.4),
    0 4px 6px -2px rgba(54, 162, 235, 0.3);
}

/* Playful font utilities */
.font-playful {
  font-family: var(--font-playful);
}

.font-bubbly {
  font-family: var(--font-bubbly);
}
.heroshape {
  aspect-ratio: 1;
  clip-path: shape(
    from 4% 49.7%,
    curve to 14.29% 25.51% with 3.08% 34.76%,
    curve to 37.75% 17.45% with 25.49% 16.27%,
    curve to 59.84% 20.77% with 50% 18.62%,
    curve to 74.92% 31.56% with 69.68% 22.91%,
    curve to 86.11% 51.93% with 80.16% 40.2%,
    curve to 79.88% 69% with 92.07% 63.67%,
    curve to 58.84% 85.8% with 67.69% 74.34%,
    curve to 41% 86.02% with 50% 97.26%,
    curve to 18.45% 69.72% with 31.99% 74.78%,
    curve to 4% 49.7% with 4.91% 64.65%
  );
}