/* 🎨 Ketan-inspired Kids Theme */
:root {
  /* Primary */
  --purple: #6B4A9E;
  --purple-dark: #5A3D87;
  --purple-light: #8B6DB5;
  --orange: #F5841F;
  --orange-dark: #E07010;
  --orange-light: #FF9D45;
  --coral: #E86B5A;
  
  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-cream: #FFF8F2;
  --bg-peach: #FFF5EB;
  --bg-purple: #F5F0FA;
  
  /* Text */
  --text-dark: #2D2D2D;
  --text-medium: #555555;
  --text-light: #777777;
  
  /* Category colors - Light mode */
  --cat-contes-bg: #FCE4EC;
  --cat-contes-text: #C2185B;
  --cat-fables-bg: #E8F5E9;
  --cat-fables-text: #2E7D32;
  --cat-poemes-bg: #E3F2FD;
  --cat-poemes-text: #1565C0;
  --cat-beebee-bg: #FFF3E0;
  --cat-beebee-text: #E65100;
  
  /* Accents */
  --teal: #48C9B0;
  --blue: #5DADE2;
  --yellow: #F4D03F;
  --pink: #F5A6A6;
  
  /* UI */
  --shadow: 0 10px 40px rgba(107, 74, 158, 0.12);
  --shadow-hover: 0 20px 50px rgba(107, 74, 158, 0.18);
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 50px;
  
  /* Borders */
  --border-light: #f0f0f0;
}

/* ========== NIGHT MODE ========== */
[data-theme="night"] {
  /* Backgrounds */
  --bg-white: #1E1E2E;
  --bg-cream: #252535;
  --bg-peach: #2A2A3E;
  --bg-purple: #2E2E42;
  
  /* Text */
  --text-dark: #F0F0F5;
  --text-medium: #B0B0C0;
  --text-light: #8080A0;
  
  /* Category colors - Night mode (muted) */
  --cat-contes-bg: #3D2A35;
  --cat-contes-text: #E87DA0;
  --cat-fables-bg: #2A3D2E;
  --cat-fables-text: #7EBF8A;
  --cat-poemes-bg: #2A3040;
  --cat-poemes-text: #6BA3D6;
  --cat-beebee-bg: #3D3328;
  --cat-beebee-text: #F5A050;
  
  /* UI */
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.5);
  
  /* Borders */
  --border-light: #3A3A4E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 17px; scroll-behavior: smooth; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-white);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Typography */
h1, h2, h3, h4 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.25;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1rem; color: var(--text-medium); }

a { color: var(--purple); text-decoration: none; transition: all 0.3s; }
a:hover { color: var(--orange); }

[data-theme="night"] a { color: var(--purple-light); }
[data-theme="night"] a:hover { color: var(--orange-light); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--orange);
  color: white;
  box-shadow: 0 8px 25px rgba(245, 132, 31, 0.35);
}

.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(245, 132, 31, 0.45);
  color: white;
}

.btn-secondary {
  background: var(--purple);
  color: white;
  box-shadow: 0 8px 25px rgba(107, 74, 158, 0.3);
}

.btn-secondary:hover {
  background: var(--purple-dark);
  transform: translateY(-3px);
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--purple);
  border: 2px solid var(--purple);
}

.btn-outline:hover {
  background: var(--purple);
  color: white;
}

/* Cards */
.card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--border-light);
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

/* Language toggle */
.lang-toggle {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bg-cream);
  border-radius: var(--radius-pill);
}

.lang-toggle a {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-medium);
}

.lang-toggle a.active {
  background: var(--purple);
  color: white;
}

/* Night toggle */
.night-toggle {
  position: fixed;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  right: calc(2rem + env(safe-area-inset-right));
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--purple);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  box-shadow: 0 8px 25px rgba(107, 74, 158, 0.4);
  z-index: 100;
  transition: all 0.3s;
}

.night-toggle:hover {
  transform: scale(1.1);
  background: var(--purple-dark);
}

[data-theme="night"] .night-toggle {
  background: var(--orange);
  box-shadow: 0 8px 25px rgba(245, 132, 31, 0.4);
}

[data-theme="night"] .night-toggle:hover {
  background: var(--orange-dark);
}

/* Category badges */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-contes { background: var(--cat-contes-bg); color: var(--cat-contes-text); }
.category-fables { background: var(--cat-fables-bg); color: var(--cat-fables-text); }
.category-poemes { background: var(--cat-poemes-bg); color: var(--cat-poemes-text); }
.category-beebee { background: var(--cat-beebee-bg); color: var(--cat-beebee-text); }

/* BeeBee animation */
.beebee {
  display: inline-block;
  animation: beebee-bounce 2s ease-in-out infinite;
}

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

/* Blob shapes */
.blob {
  position: absolute;
  border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
  pointer-events: none;
  z-index: 0;
}

.blob-purple {
  background: linear-gradient(135deg, rgba(107, 74, 158, 0.1), rgba(107, 74, 158, 0.05));
}

.blob-orange {
  background: linear-gradient(135deg, rgba(245, 132, 31, 0.1), rgba(245, 132, 31, 0.05));
}

.blob-teal {
  background: linear-gradient(135deg, rgba(72, 201, 176, 0.1), rgba(72, 201, 176, 0.05));
}

/* Section backgrounds */
.section-white { background: var(--bg-white); }
.section-cream { background: var(--bg-cream); }
.section-peach { background: var(--bg-peach); }
.section-purple { background: var(--purple); color: white; }

/* Decorative dots */
.dots {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(5, 8px);
  gap: 8px;
}

.dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.3;
}

/* Responsive */
@media (max-width: 768px) {
  html { font-size: 15px; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .container { padding: 0 1rem; }
}

/* Fonts */
@font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }