/* Fonts: loaded in Blade layout (preconnect + link). Tokens: */
:root {
    --void:        #120B08;
    --deep:        #1A110D;
    --dark:        #241711;
    --surface:     #2A1C15;
    --surface-2:   #302018;
    --surface-3:   #38261D;
    --border:      #4B3529;
    --border-2:    #6B4A36;
    --gold:        #D6A34F;
    --gold-lt:     #F4CF8A;
    --gold-dk:     #A7742F;
    --gold-bg:     rgba(214,163,79,.14);
    --gold-bg2:    rgba(214,163,79,.22);
    --cream:       #F7EEE2;
    --muted:       #ffffff;
    --faint:       #8F6F59;
    --state-clean: #B8C98F;
    --state-clean-bg: rgba(184,201,143,.16);
    --state-occupied: #E2A14A;
    --state-occupied-bg: rgba(226,161,74,.18);
    --state-reserved: #D18B61;
    --state-reserved-bg: rgba(209,139,97,.17);
    --state-needs-clean: #BD6A4A;
    --state-needs-clean-bg: rgba(189,106,74,.16);
    --success:     #2D9F6B;
    --success-lt:  rgba(45,159,107,.12);
    --warning:     #D4873A;
    --warning-lt:  rgba(212,135,58,.12);
    --danger:      #C0392B;
    --danger-lt:   rgba(192,57,43,.12);
    --info:        #3A7BD5;
    --info-lt:     rgba(58,123,213,.12);
    --sidebar-w:   230px;
    --sidebar-collapsed: 58px;
    --header-h:    58px;
    --footer-h:    34px;
    --radius:      10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --t-fast:   0.12s cubic-bezier(.4,0,.2,1);
    --t:        0.18s cubic-bezier(.4,0,.2,1);
    --t-slow:   0.30s cubic-bezier(.4,0,.2,1);
    --t-spring: 0.25s cubic-bezier(.34,1.56,.64,1);
    --font:     'Outfit', sans-serif;
    --serif:    'Cormorant Garamond', serif;
    --mono:     'JetBrains Mono', monospace;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(214,163,79,.14), transparent 60%), radial-gradient(900px 420px at 85% 0%, rgba(153,90,44,.18), transparent 62%), linear-gradient(180deg, #1A110D 0%, #120B08 55%, #0F0705 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(214,163,79,.11), transparent 65%), linear-gradient(180deg, #21150F 0%, var(--deep) 38%, #120C09 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 38%), linear-gradient(90deg, #1A110D 0%, #241912 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
    min-height: 100%;
    font-family: var(--font);
    background: var(--app-bg);
    background-attachment: fixed;
    color: var(--cream);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body,
.sidebar,
.top-header,
.res-footer,
.card,
.stat-card,
.table-tile,
.nav-item,
.h-btn,
.venue-selector,
.live-clock,
.btn,
.form-control,
.modal {
    transition: background var(--t-slow), background-color var(--t-slow), color var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow);
}

/* Optional tone switch: add class "tone-cafe" or "tone-cocoa" on body. */
body.tone-cafe {
    --void: #1A120E;
    --deep: #241912;
    --dark: #2E2017;
    --surface: #35241A;
    --surface-2: #3D2A1E;
    --surface-3: #473023;
    --border: #60412F;
    --border-2: #7D573F;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(214,163,79,.17), transparent 62%), radial-gradient(900px 420px at 85% 0%, rgba(164,96,49,.2), transparent 64%), linear-gradient(180deg, #261913 0%, #1A120E 55%, #140D09 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(214,163,79,.13), transparent 65%), linear-gradient(180deg, #2B1C14 0%, var(--deep) 38%, #1A120E 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 38%), linear-gradient(90deg, #241912 0%, #302018 100%);
}

body.tone-cocoa {
    --void: #100805;
    --deep: #170F0B;
    --dark: #20150F;
    --surface: #271A13;
    --surface-2: #2E1E16;
    --surface-3: #37241B;
    --border: #473225;
    --border-2: #634532;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(214,163,79,.12), transparent 62%), radial-gradient(900px 420px at 85% 0%, rgba(128,74,36,.18), transparent 64%), linear-gradient(180deg, #170F0B 0%, #100805 58%, #0C0503 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(214,163,79,.09), transparent 65%), linear-gradient(180deg, #1B120D 0%, var(--deep) 38%, #0F0705 100%);
    --header-bg: linear-gradient(180deg, rgba(255,255,255,.045) 0%, transparent 38%), linear-gradient(90deg, #170F0B 0%, #20150F 100%);
}

body.tone-light {
    --void: #e5e7eb;
    --deep: #f3f4f6;
    --dark: #e5e7eb;
    --surface: #ffffff;
    --surface-2: #f9fafb;
    --surface-3: #f0f2f5;
    --border: #e5e7eb;
    --border-2: #d1d5db;
    --gold: #2563eb;
    --gold-lt: #1d4ed8;
    --gold-dk: #1e40af;
    --gold-bg: rgba(37,99,235,.12);
    --gold-bg2: rgba(37,99,235,.20);
    --cream: #111827;
    --muted: #6b7280;
    --faint: #9ca3af;
    --state-clean: #10b981;
    --state-clean-bg: rgba(16,185,129,.14);
    --state-occupied: #f59e0b;
    --state-occupied-bg: rgba(245,158,11,.14);
    --state-reserved: #7c3aed;
    --state-reserved-bg: rgba(124,58,237,.13);
    --state-needs-clean: #ef4444;
    --state-needs-clean-bg: rgba(239,68,68,.12);
    --success-lt: rgba(16,185,129,.16);
    --warning-lt: rgba(245,158,11,.16);
    --danger-lt: rgba(239,68,68,.14);
    --info-lt: rgba(14,165,233,.16);
    --app-bg: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    --header-bg: linear-gradient(90deg, #ffffff 0%, #fafafa 100%);
}

body.tone-obsidian {
    --void: #050505;
    --deep: #0a0a0a;
    --dark: #121212;
    --surface: #1a1a1a;
    --surface-2: #242424;
    --surface-3: #2e2e2e;
    --border: #383838;
    --border-2: #4a4a4a;
    --gold: #D4AF37;
    --gold-lt: #FFE58F;
    --gold-dk: #AA8C2C;
    --gold-bg: rgba(212, 175, 55, 0.12);
    --gold-bg2: rgba(212, 175, 55, 0.18);
    --cream: #F5F5F5;
    --muted: #A3A3A3;
    --faint: #737373;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(212, 175, 55, 0.12), transparent 50%), radial-gradient(900px 420px at 85% 0%, rgba(255, 255, 255, 0.05), transparent 60%), linear-gradient(180deg, #0a0a0a 0%, #050505 50%, #000000 100%);
    --sidebar-bg: radial-gradient(90% 40% at 0% 0%, rgba(212, 175, 55, 0.08), transparent 60%), linear-gradient(180deg, #121212 0%, var(--deep) 38%, #000000 100%);
    --header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 38%), linear-gradient(90deg, #0a0a0a 0%, #121212 100%);
}

body.tone-ocean {
    --void: #F0F4F8;
    --deep: #E2E8F0;
    --dark: #CBD5E1;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #F1F5F9;
    --border: #CBD5E1;
    --border-2: #94A3B8;
    --gold: #3B82F6;
    --gold-lt: #2563EB;
    --gold-dk: #1D4ED8;
    --gold-bg: rgba(59,130,246,.16);
    --gold-bg2: rgba(59,130,246,.24);
    --cream: #111827;
    --muted: #6b7280;
    --faint: #9ca3af;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(59,130,246,.12), transparent 50%), linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
    --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --header-bg: linear-gradient(90deg, #FFFFFF 0%, #F8FAFC 100%);
}

body.tone-mint {
    --void: #F0FDF4;
    --deep: #DCFCE7;
    --dark: #BBF7D0;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #F1F5F9;
    --border: #BBF7D0;
    --border-2: #86EFAC;
    --gold: #10B981;
    --gold-lt: #059669;
    --gold-dk: #047857;
    --gold-bg: rgba(16,185,129,.16);
    --gold-bg2: rgba(16,185,129,.24);
    --cream: #111827;
    --muted: #6b7280;
    --faint: #9ca3af;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(16,185,129,.12), transparent 50%), linear-gradient(180deg, #F0FDF4 0%, #E0F2FE 50%, #F8FAFC 100%);
    --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
    --header-bg: linear-gradient(90deg, #FFFFFF 0%, #F0FDF4 100%);
}

body.tone-sunset {
    --void: #FFF7ED;
    --deep: #FFEDD5;
    --dark: #FED7AA;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --surface-3: #F1F5F9;
    --border: #FED7AA;
    --border-2: #FDBA74;
    --gold: #F97316;
    --gold-lt: #EA580C;
    --gold-dk: #C2410C;
    --gold-bg: rgba(249,115,22,.16);
    --gold-bg2: rgba(249,115,22,.24);
    --cream: #111827;
    --muted: #6b7280;
    --faint: #9ca3af;
    --app-bg: radial-gradient(1200px 500px at 20% -10%, rgba(249,115,22,.12), transparent 50%), linear-gradient(180deg, #FFF7ED 0%, #FFF1F2 50%, #F8FAFC 100%);
    --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
    --header-bg: linear-gradient(90deg, #FFFFFF 0%, #FFF7ED 100%);
}

@media (prefers-reduced-motion: reduce) {
    body,
    .sidebar,
    .top-header,
    .res-footer,
    .card,
    .stat-card,
    .table-tile,
    .nav-item,
    .h-btn,
    .venue-selector,
    .live-clock,
    .btn,
    .form-control,
    .modal {
        transition: none;
    }
}

::selection { background: var(--gold-bg2); color: var(--gold-lt); }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

.t-display { font-family: var(--serif); font-size: clamp(24px, 3vw, 36px); font-weight: 300; letter-spacing: .02em; }
.t-title   { font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); font-weight: 400; }
.t-heading { font-size: 15px; font-weight: 600; color: var(--cream); }
.t-label   { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.t-body    { font-size: 13.5px; line-height: 1.6; color: var(--cream); }
.t-small   { font-size: 11.5px; color: var(--muted); }
.t-mono    { font-family: var(--mono); font-size: 13px; }
.t-price   { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--gold-lt); }
.t-gold    { color: var(--gold-lt); }
.t-muted   { color: var(--muted); }
.t-faint   { color: var(--faint); }