* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #eef2f6; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

code { font-family: 'Courier New', monospace; font-size: 0.875em; }

/* Light inputs */
.inp { width:100%; background:#ffffff; border:1px solid #cbd5e1; border-radius:.75rem; padding:.6rem 1rem; color:#0f172a; font-size:.875rem; outline:none; }
.inp:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.inp::placeholder { color:#94a3b8; }

/* ============================================================
   LIGHT THEME
   Remaps the dark Tailwind utilities used across the templates to a
   light palette. !important so it reliably beats the Tailwind Play CDN.
   ============================================================ */

body { background:#f8fafc !important; color:#0f172a !important; }

/* Backgrounds */
.bg-gray-950 { background-color:#f8fafc !important; }
.bg-gray-950\/80 { background-color:rgba(248,250,252,.85) !important; }
.bg-gray-900 { background-color:#ffffff !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; }
.bg-gray-800 { background-color:#f1f5f9 !important; }
.bg-gray-800\/60 { background-color:rgba(241,245,249,.7) !important; }
.bg-gray-800\/40 { background-color:rgba(241,245,249,.6) !important; }
.bg-gray-800\/30 { background-color:rgba(241,245,249,.5) !important; }
.bg-gray-700 { background-color:#e2e8f0 !important; }

/* Borders */
.border-gray-800 { border-color:#e5e9f0 !important; }
.border-gray-700 { border-color:#cbd5e1 !important; }

/* Text — grays */
.text-white { color:#0f172a !important; }
.text-gray-100 { color:#0f172a !important; }
.text-gray-200 { color:#1e293b !important; }
.text-gray-300 { color:#334155 !important; }
.text-gray-400 { color:#475569 !important; }
.text-gray-500 { color:#64748b !important; }
.text-gray-600 { color:#94a3b8 !important; }
.placeholder-gray-600::placeholder { color:#94a3b8 !important; }

/* Accent text — darkened for contrast on white */
.text-indigo-400, .text-indigo-300 { color:#4f46e5 !important; }
.text-green-400, .text-green-300 { color:#16a34a !important; }
.text-red-400, .text-red-300 { color:#dc2626 !important; }
.text-yellow-300, .text-yellow-400, .text-yellow-500 { color:#b45309 !important; }

/* Hover states */
.hover\:bg-gray-700:hover { background-color:#e2e8f0 !important; }
.hover\:bg-gray-900:hover { background-color:#f1f5f9 !important; }
.hover\:text-white:hover { color:#0f172a !important; }
.hover\:text-gray-300:hover { color:#334155 !important; }
.hover\:text-gray-400:hover { color:#475569 !important; }
.hover\:border-gray-500:hover { border-color:#94a3b8 !important; }
.hover\:text-red-400:hover { color:#dc2626 !important; }
.hover\:text-green-400:hover { color:#16a34a !important; }
.hover\:text-indigo-300:hover { color:#4338ca !important; }
.hover\:text-yellow-400:hover { color:#b45309 !important; }

/* Solid / colored buttons keep WHITE text. Declared AFTER the text overrides so
   they win (equal specificity → later rule). The attribute selector re-whitens the
   play page's inline brand-colored buttons (background set via style=""). */
.bg-indigo-600, .bg-indigo-500, .bg-indigo-400,
.bg-red-600, .bg-red-500,
.bg-green-600, .bg-green-500 { color:#ffffff !important; }
[style*="background"].text-white { color:#ffffff !important; }