@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
}

body {
  font-family: 'Fredoka', sans-serif;
  background-color: #f0f4f8;
  margin: 0;
  padding: 0;
}

.math-font {
  font-family: 'JetBrains Mono', monospace;
}

/* Animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pop { animation: pop 0.3s ease-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease-out forwards; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp 0.4s ease-out forwards; }

sup {
  font-size: 0.6em;
  vertical-align: super;
}

/* Coordinate Plane */
.coord-plane {
  cursor: crosshair;
  user-select: none;
  touch-action: none;
}
.coord-plane-point {
  transition: all 0.2s ease;
}
.coord-plane-point:hover {
  filter: brightness(1.2);
}

/* Box Grid for Factoring */
.box-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 8px;
  align-items: center;
  justify-items: center;
}

/* Step styling */
.step-complete {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* Responsive */
@media (max-width: 640px) {
  .topic-grid {
    grid-template-columns: 1fr !important;
  }
}