/* Lucky Box Kenya — custom utilities */

:root {
  --lb-radius: 1.5rem;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 130, 0.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 130, 0.5); }

/* Safe-area padding for mobile nav */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Reusable component classes */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 1rem; font-weight: 600;
  background: var(--brand-500, #10b981); color: #fff;
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5);
  transition: all 0.2s ease;
}
.btn-primary:hover { transform: translateY(-1px); }

.card {
  border-radius: var(--lb-radius);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .card { background: rgba(24, 24, 27, 0.6); border-color: rgba(255, 255, 255, 0.08); }

.input {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem;
  background: #fafafa; border: 1px solid #e4e4e7; outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.dark .input { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.input:focus { box-shadow: 0 0 0 2px var(--brand-500, #10b981); border-color: transparent; }

/* Prose dark-mode link color */
.prose a { color: #10b981; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.dark .prose { color: #d4d4d8; }
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose strong { color: #fafafa; }

/* Number grid hover effect helper */
.num-cell { transition: transform 0.1s ease, background 0.15s ease; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}