/* Bocanzo shared light/dark color system. */
:root {
    color-scheme: light;
    --theme-page: #f8fafc;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f1f5f9;
    --theme-surface-raised: #ffffff;
    --theme-border: #e2e8f0;
    --theme-border-strong: #cbd5e1;
    --theme-text: #0f172a;
    --theme-text-soft: #334155;
    --theme-muted: #64748b;
    --theme-subtle: #94a3b8;
    --theme-shadow: 15 23 42;
    --theme-overlay: rgba(15, 23, 42, 0.58);
    --home-warm-surface: #fbfaf7;
    --home-muted-surface: #f7f8f6;
}

html.dark {
    color-scheme: dark;
    --theme-page: #090d14;
    --theme-surface: #111827;
    --theme-surface-soft: #182231;
    --theme-surface-raised: #1c2736;
    --theme-border: #293548;
    --theme-border-strong: #3a475b;
    --theme-text: #f8fafc;
    --theme-text-soft: #d7deea;
    --theme-muted: #a7b1c2;
    --theme-subtle: #7f8b9e;
    --theme-shadow: 0 0 0;
    --theme-overlay: rgba(2, 6, 12, 0.78);
    --home-warm-surface: #0d131c;
    --home-muted-surface: #0a1018;
}

html,
body {
    background-color: var(--theme-page);
    color: var(--theme-text);
}

.home-warm-surface {
    background-color: var(--home-warm-surface);
}

.home-muted-surface {
    background-color: var(--home-muted-surface);
}

body, header, main, footer, aside, nav, section, article, div, a, button,
input, select, textarea, table, thead, tbody, tr, th, td, svg {
    transition: background-color 240ms ease, border-color 240ms ease,
        color 180ms ease, box-shadow 240ms ease, fill 180ms ease, stroke 180ms ease;
}

html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
    transition-duration: 320ms !important;
}

/* Surfaces */
.dark body,
.dark .bg-gray-50,
.dark .bg-slate-50 {
    background-color: var(--theme-page) !important;
}

.dark .bg-white,
.dark .bg-gray-100,
.dark .bg-slate-100,
.dark .modal-content,
.dark .product-card,
.dark table,
.dark thead,
.dark tbody,
.dark .mobile-sidebar,
.dark #mobileNavMenu {
    background-color: var(--theme-surface) !important;
}

.dark .bg-gray-200,
.dark .bg-slate-200,
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-slate-100:hover,
.dark tr:hover,
.dark .product-card:hover {
    background-color: var(--theme-surface-soft) !important;
}

.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 16px 42px rgba(var(--theme-shadow), 0.34) !important;
}

/* Typography */
.dark .text-black,
.dark .text-gray-950,
.dark .text-gray-900,
.dark .text-slate-900,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: var(--theme-text) !important;
}

.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-slate-800,
.dark .text-slate-700 {
    color: var(--theme-text-soft) !important;
}

.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-slate-600,
.dark .text-slate-500 {
    color: var(--theme-muted) !important;
}

.dark .text-gray-400,
.dark .text-slate-400 {
    color: var(--theme-subtle) !important;
}

/* Borders and dividers */
.dark .border,
.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r,
.dark .border-gray-50,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--theme-border) !important;
}

/* Forms */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark textarea,
.dark select {
    background-color: #0c131e !important;
    border-color: var(--theme-border-strong) !important;
    color: var(--theme-text) !important;
    box-shadow: none;
}

.dark input:not([type="checkbox"]):not([type="radio"]):focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--theme-subtle) !important;
    opacity: 1;
}

.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
    background-color: #151d29 !important;
    color: #738096 !important;
}

/* Semantic pale backgrounds */
.dark .bg-emerald-50,
.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.12) !important; }
.dark .bg-blue-50,
.dark .bg-indigo-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
.dark .bg-amber-50,
.dark .bg-yellow-50,
.dark .bg-orange-50 { background-color: rgba(245, 158, 11, 0.13) !important; }
.dark .bg-red-50,
.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; }
.dark .bg-purple-50,
.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.13) !important; }

.dark .text-emerald-700,
.dark .text-emerald-800,
.dark .text-green-700,
.dark .text-green-800 { color: #6ee7b7 !important; }
.dark .text-blue-700,
.dark .text-blue-800,
.dark .text-indigo-700,
.dark .text-indigo-800 { color: #93c5fd !important; }
.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-yellow-700,
.dark .text-orange-700 { color: #fcd34d !important; }
.dark .text-red-700,
.dark .text-red-800,
.dark .text-rose-700 { color: #fda4af !important; }

.dark .restaurant-register-cta {
    background: #059669 !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(16, 185, 129, 0.22);
    animation: restaurant-register-glow 3.2s ease-in-out infinite;
}

.dark .restaurant-register-cta:hover {
    background: #047857 !important;
    border-color: #6ee7b7 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.dark .customer-benefits-container {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(52, 211, 153, 0.26) !important;
}

.dark .customer-benefit-item {
    background: var(--theme-surface-raised) !important;
    border-color: var(--theme-border) !important;
}

@keyframes restaurant-register-glow {
    0%, 100% {
        box-shadow: 0 10px 26px rgba(16, 185, 129, 0.18);
    }
    50% {
        box-shadow: 0 12px 32px rgba(52, 211, 153, 0.34);
    }
}

/* Header, menus and overlays */
.dark header {
    background-color: rgba(17, 24, 39, 0.92) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 1px 0 var(--theme-border) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.dark [class*="fixed"][class*="inset-0"][class*="bg-black"] {
    background-color: var(--theme-overlay) !important;
}

.dark #toast {
    background-color: var(--theme-surface-raised) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text) !important;
}

/* Project-specific components with local page styles */
.dark .admin-ops-card,
.dark .customer-card,
.dark .customer-pill,
.dark .deal-card,
.dark .search-input,
.dark .cart-bar,
.dark .category-tab:not(.active),
.dark .qty-btn {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-soft) !important;
}

.dark .customer-shell {
    background: var(--theme-page) !important;
}

.dark .admin-ops-link {
    border-color: var(--theme-border) !important;
}

.dark .admin-ops-link:hover,
.dark .customer-pill:hover,
.dark .customer-pill.active,
.dark .category-tab:not(.active):hover {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(52, 211, 153, 0.55) !important;
    color: #6ee7b7 !important;
}

.dark .badge-available {
    background: rgba(17, 24, 39, 0.92) !important;
    color: #6ee7b7 !important;
}

.dark .empty-icon {
    background: var(--theme-surface-soft) !important;
}

.dark .sidebar-link {
    color: var(--theme-muted) !important;
}

.dark .sidebar-link:hover:not(.active) {
    background-color: var(--theme-surface-soft) !important;
    color: #6ee7b7 !important;
}

.dark .bg-white\/95,
.dark .bg-white\/80,
.dark .bg-white\/70,
.dark .bg-white\/60,
.dark .bg-white\/50 {
    background-color: rgba(17, 24, 39, 0.92) !important;
}

/* Bottom navigation */
.dark .mobile-bottom-nav-items {
    background: rgba(14, 21, 31, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42) !important;
}

.dark .mobile-nav-item { color: var(--theme-muted) !important; }
.dark .mobile-nav-item:hover,
.dark .mobile-nav-item.active {
    background: rgba(51, 65, 85, 0.64) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #6ee7b7 !important;
}

.dark .mobile-nav-item.menu-btn,
.dark .mobile-nav-item.menu-btn:hover,
.dark .mobile-nav-item.menu-btn.active {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
}

.dark .mobile-nav-badge { box-shadow: 0 0 0 2px #0e151f !important; }

/* Animated theme switch */
.theme-switch {
    position: relative;
    width: 66px;
    height: 34px;
    flex: 0 0 66px;
    padding: 3px;
    border: 1px solid #dbe3ed;
    border-radius: 999px;
    overflow: hidden;
    background: #edf2f7;
    color: #64748b;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    isolation: isolate;
}

.theme-switch:hover {
    border-color: #c3cedc;
    background: #e7edf4;
}

.theme-switch:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.24);
    outline-offset: 3px;
}

.theme-switch__icon {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    pointer-events: none;
}

.theme-switch__sun { left: 9px; color: #f59e0b; }
.theme-switch__moon { right: 9px; color: #64748b; }

.theme-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.2);
    transform: translateX(32px);
    transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 240ms ease, box-shadow 240ms ease;
}

.dark .theme-switch {
    border-color: #3a475b;
    background: #172131;
    color: #cbd5e1;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.dark .theme-switch:hover { background: #1b2738; border-color: #4a586d; }
.dark .theme-switch__sun { color: #7f8b9e; }
.dark .theme-switch__moon { color: #c4b5fd; }
.dark .theme-switch__thumb {
    background: #334155;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
    transform: translateX(0);
}

.theme-switch.is-animating .theme-switch__sun { animation: theme-sun-spin 420ms ease; }
.theme-switch.is-animating .theme-switch__moon { animation: theme-moon-pop 420ms ease; }

@keyframes theme-sun-spin {
    50% { transform: translateY(-50%) rotate(100deg) scale(0.72); }
}
@keyframes theme-moon-pop {
    50% { transform: translateY(-50%) rotate(-18deg) scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
    body, header, main, footer, aside, nav, section, article, div, a, button,
    input, select, textarea, table, thead, tbody, tr, th, td, svg,
    .theme-switch__thumb {
        transition: none !important;
        animation: none !important;
    }

    .dark .restaurant-register-cta {
        animation: none !important;
    }
}

::-webkit-scrollbar-track { background: var(--theme-page); }
::-webkit-scrollbar-thumb { background: #475569; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }