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

/* Responsive base type scale: 15px desktop (the global base) / 13px tablet
   (<=1024px) / 12px mobile (<=640px). Desktop-first cascade: the two media
   queries below override the 15px default as the viewport narrows, and
   since the 640px block is declared last it wins over the 1024px block
   on mobile widths (both match, source order decides). Every `rem`-based
   Tailwind utility (text-sm, text-xs, p-4, gap-2, ...) scales off this
   root value automatically. */
html {
    font-size: 15px;
}
@media (max-width: 1024px) {
    html { font-size: 13px; }
}
@media (max-width: 640px) {
    html { font-size: 12px; }
}

body {
    font-family: 'Outfit', sans-serif;
}

/* Single page-width container, replacing the old ad-hoc max-w-7xl wrappers.
   !important guards against load-order races with Tailwind's CDN script,
   which injects its own (differently-behaved) .container utility. */
.container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1280px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ==========================================================================
   Staff Dashboard: Light Mode
   The dashboard is built dark-first (Tailwind slate-900/950/800 palette).
   Rather than rewrite every dashboard template with `dark:` variants, this
   block remaps that same fixed, consistently-reused set of utility classes
   to light equivalents whenever <html data-theme="light">. Every dashboard
   page composes from this same small token vocabulary, so this one block
   re-themes the entire dashboard consistently. !important guards against
   load-order races with Tailwind's CDN-injected stylesheet.
   ========================================================================== */
html[data-theme="light"] {
    color-scheme: light;
}

/* Root chrome */
html[data-theme="light"].bg-slate-900 { background-color: #ffffff !important; }
html[data-theme="light"] body.bg-slate-950 { background-color: #f8fafc !important; }
html[data-theme="light"] body.text-slate-100 { color: #0f172a !important; }

/* Surfaces: 950 = page/deep background, 900 = card, 800 = hover/lighter panel, 700 = secondary element */
html[data-theme="light"] .bg-slate-950 { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-slate-900 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.7) !important; }
html[data-theme="light"] .bg-slate-800 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-slate-800\/40 { background-color: rgba(241, 245, 249, 0.6) !important; }
html[data-theme="light"] .bg-slate-800\/50 { background-color: rgba(241, 245, 249, 0.7) !important; }
html[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(241, 245, 249, 0.8) !important; }
html[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(226, 232, 240, 0.9) !important; }
html[data-theme="light"] .bg-slate-700 { background-color: #e2e8f0 !important; }
html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: #f1f5f9 !important; }
html[data-theme="light"] .hover\:bg-slate-800\/40:hover { background-color: rgba(241, 245, 249, 0.6) !important; }
html[data-theme="light"] .hover\:bg-slate-800\/50:hover { background-color: rgba(241, 245, 249, 0.7) !important; }
html[data-theme="light"] .hover\:bg-slate-800\/60:hover { background-color: rgba(241, 245, 249, 0.8) !important; }
html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; }
html[data-theme="light"] .hover\:bg-rose-950\/40:hover { background-color: #fef2f2 !important; }
html[data-theme="light"] .hover\:bg-rose-950\/70:hover { background-color: #fee2e2 !important; }
html[data-theme="light"] .bg-rose-950\/40 { background-color: #fef2f2 !important; }

/* Borders */
html[data-theme="light"] .border-slate-800 { border-color: #e2e8f0 !important; }
html[data-theme="light"] .border-slate-700 { border-color: #cbd5e1 !important; }
html[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; }
html[data-theme="light"] .divide-slate-800\/80 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(226, 232, 240, 0.8) !important; }
html[data-theme="light"] .border-rose-900 { border-color: #fecaca !important; }

/* Text */
html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-slate-100 { color: #1e293b !important; }
html[data-theme="light"] .text-slate-200 { color: #334155 !important; }
html[data-theme="light"] .text-slate-300 { color: #475569 !important; }
html[data-theme="light"] .text-slate-400 { color: #64748b !important; }
html[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; }
html[data-theme="light"] .hover\:text-slate-200:hover { color: #1e293b !important; }
html[data-theme="light"] .placeholder-slate-400::placeholder { color: #94a3b8 !important; }
html[data-theme="light"] .placeholder-slate-500::placeholder { color: #94a3b8 !important; }

/* Accent colors need darkening for contrast against a white surface */
html[data-theme="light"] .text-brand-400 { color: #282878 !important; }
html[data-theme="light"] .text-brand-300 { color: #282878 !important; }
html[data-theme="light"] .hover\:text-brand-400:hover { color: #1e1e5a !important; }
html[data-theme="light"] .hover\:text-brand-300:hover { color: #1e1e5a !important; }
html[data-theme="light"] .text-success-400 { color: #2e9c3d !important; }
html[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
html[data-theme="light"] .text-emerald-300 { color: #059669 !important; }
html[data-theme="light"] .text-rose-400 { color: #e11d48 !important; }
html[data-theme="light"] .text-rose-300 { color: #e11d48 !important; }
html[data-theme="light"] .hover\:text-rose-400:hover { color: #be123c !important; }
html[data-theme="light"] .text-amber-400 { color: #b45309 !important; }
html[data-theme="light"] .text-blue-400 { color: #2563eb !important; }
html[data-theme="light"] .text-purple-400 { color: #7c3aed !important; }

/* Badge rings (e.g. the notification counter) are drawn against the header
   background, so they need to flip along with it. */
html[data-theme="light"] .ring-slate-900 { --tw-ring-color: #ffffff !important; }

/* Scrollbar + selection stay readable in light mode */
html[data-theme="light"] ::selection { background-color: #c7d2fe; color: #1e1e5a; }