/* Ported from EventSlideshow's partials/theme.blade.php dark-mode block.
   Targets the existing utility class names used throughout the ported
   GiggleSHARE pages (bg-white, text-gray-900, ...) rather than requiring
   dark: variants on every element, matching how EventSlideshow itself
   implements dark mode. Toggled by the same html.dark class the
   gs-header.blade.php theme button already sets. */
html.dark { color-scheme: dark; }

/* Backgrounds */
html.dark .bg-cream-50,
html.dark .bg-cream-100      { background-color: #0f172a !important; }
html.dark .bg-cream-200,
html.dark .bg-cream-300      { background-color: #1e293b !important; }
html.dark .bg-white           { background-color: #1e293b !important; }
html.dark .bg-white\/80       { background-color: rgba(30,41,59,.85) !important; }
html.dark .bg-gray-50         { background-color: #1e293b !important; }
html.dark .bg-gray-100        { background-color: #334155 !important; }
html.dark .bg-gray-800        { background-color: #0f172a !important; }
html.dark .bg-gray-900        { background-color: #020617 !important; }

/* Text */
html.dark .text-gray-900      { color: #f1f5f9 !important; }
html.dark .text-gray-800      { color: #e2e8f0 !important; }
html.dark .text-gray-700      { color: #cbd5e1 !important; }
html.dark .text-gray-600      { color: #94a3b8 !important; }
html.dark .text-gray-500      { color: #94a3b8 !important; }
html.dark .text-gray-400      { color: #64748b !important; }
html.dark .text-gray-300      { color: #94a3b8 !important; }

/* Borders */
html.dark .border-gray-100    { border-color: #1e293b !important; }
html.dark .border-gray-200    { border-color: #334155 !important; }
html.dark .border-gray-300    { border-color: #475569 !important; }

/* Form controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="color"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark select option        { color: #475569 !important; }

/* Status / alert banners */
html.dark .bg-green-50         { background-color: rgba(6,78,59,.3) !important; }
html.dark .bg-green-100        { background-color: rgba(6,78,59,.4) !important; }
html.dark .border-green-200    { border-color: #065f46 !important; }
html.dark .text-green-700,
html.dark .text-green-600      { color: #6ee7b7 !important; }

html.dark .bg-red-50           { background-color: rgba(69,10,10,.3) !important; }
html.dark .border-red-200      { border-color: #7f1d1d !important; }
html.dark .text-red-700,
html.dark .text-red-600        { color: #fca5a5 !important; }

/* Brand tints in dark mode */
html.dark .bg-brand-50         { background-color: rgba(16,184,159,.08) !important; }
html.dark .bg-brand-100        { background-color: rgba(16,184,159,.12) !important; }

/* Shadows */
html.dark .shadow-sm           { box-shadow: 0 1px 2px 0 rgba(0,0,0,.4) !important; }
html.dark .shadow-lg           { box-shadow: 0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.4) !important; }
html.dark .shadow-xl           { box-shadow: 0 20px 25px -5px rgba(0,0,0,.5),0 8px 10px -6px rgba(0,0,0,.4) !important; }

/* Hover states */
html.dark .hover\:bg-gray-50:hover  { background-color: #334155 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #475569 !important; }

/* Misc */
html.dark .ring-gray-200      { --tw-ring-color: #334155 !important; }