/* ─── Design tokens ──────────────────────────────────────────────────────── */
/* Single source of truth for all colours and theme variables.               */
/* Loaded first in index.html so app.css, landing.css, and all              */
/* component .razor.css files can reference these custom properties.         */
:root {
    /* Typography */
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-font-sans-serif:  'Inter', sans-serif;

    /* ── Dark theme design tokens (default) ── */
    --lp-bg:          #111827;
    --lp-bg-card:     #1f2937;
    --lp-bg-card2:    #18202e;
    --lp-orange:      #f59e0b;
    --lp-orange-dim:  #d97706;
    --lp-cyan:        #06b6d4;   /* modifier accent — badge & manage-modifiers button */
    --lp-purple:      #a855f7;   /* variant accent  — badge & manage-variants button */
    --lp-danger:      #ef4444;   /* canonical danger red — used by --res-danger & --res-noshow */
    --lp-success:     #22c55e;   /* canonical success green — used by --res-seated */
    --lp-text:        #f9fafb;
    --lp-muted:       #9ca3af;
    --lp-border:      #374151;
    --lp-radius:      12px;
    --check-panel-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);

    /* ── RGB channel values ─────────────────────────────────────────────────
       Use these to build tinted/alpha variants in any CSS file without
       repeating magic number tuples.  Example:
           rgba(var(--lp-orange-rgb), 0.15)
       ──────────────────────────────────────────────────────────────────── */
    --lp-orange-rgb:         245, 158, 11;   /* = --lp-orange */
    --lp-orange-dim-rgb:     217, 119, 6;    /* = --lp-orange-dim */
    --lp-danger-rgb:         239, 68, 68;    /* = --lp-danger */
    --lp-soft-red-rgb:       248, 113, 113;  /* lighter red (#f87171) for inline error text */
    --lp-success-rgb:        34, 197, 94;    /* = --lp-success */
    --lp-text-rgb:           249, 250, 251;  /* = --lp-text */
    --lp-muted-rgb:          156, 163, 175;  /* = --lp-muted */
    --res-scheduled-rgb:     59, 130, 246;   /* = --res-scheduled */
    --res-starting-soon-rgb: 234, 179, 8;    /* = --res-starting-soon */
    --res-cancelled-rgb:     107, 114, 128;  /* = --res-cancelled */

    /* ── Interactive surface tokens (used in place of hardcoded rgba whites) ── */
    --lp-hover-bg:         rgba(255,255,255,0.06);
    --lp-hover-bg-strong:  rgba(255,255,255,0.14);
    --lp-btn-bg:           rgba(255,255,255,0.08);
    --lp-btn-border:       rgba(255,255,255,0.15);
    --lp-btn-border-hover: rgba(255,255,255,0.3);
    --lp-dropdown-bg:      #1c2333;

    /* ── Reservation display-status palette ── */
    --res-scheduled:     #3b82f6;
    --res-starting-soon: #eab308;
    --res-waiting:       var(--lp-orange);   /* same color as brand orange */
    --res-seated:        var(--lp-success);  /* same color as --lp-success */
    --res-noshow:        var(--lp-danger);   /* same color as --lp-danger / --res-danger */
    --res-danger:        var(--lp-danger);   /* same color as --lp-danger / --res-noshow */
    --res-cancelled:     #6b7280;

    /* ── Bootstrap variable overrides ── */
    --bs-body-bg:             var(--lp-bg);
    --bs-body-color:          var(--lp-text);
    --bs-secondary-color:     var(--lp-muted);
    --bs-border-color:        var(--lp-border);
    --bs-secondary-bg:        var(--lp-bg-card);
    --bs-tertiary-bg:         var(--lp-bg-card2);
    --bs-card-bg:             var(--lp-bg-card);
    --bs-card-border-color:   var(--lp-border);
    --bs-card-color:          var(--lp-text);
    --bs-modal-bg:            var(--lp-bg-card);
    --bs-modal-color:         var(--lp-text);
    --bs-modal-header-border-color: var(--lp-border);
    --bs-modal-footer-border-color: var(--lp-border);
    --bs-dropdown-bg:         var(--lp-dropdown-bg);
    --bs-dropdown-border-color: var(--lp-border);
    --bs-dropdown-color:      var(--lp-text);
    --bs-dropdown-link-color: var(--lp-text);
    --bs-dropdown-link-hover-bg: var(--lp-hover-bg);
    --bs-input-bg:            var(--lp-bg-card2);
    --bs-input-border-color:  var(--lp-border);
    --bs-input-color:         var(--lp-text);
    --bs-input-placeholder-color: var(--lp-muted);
    --bs-input-focus-border-color: var(--lp-orange);
    --bs-input-focus-box-shadow: 0 0 0 0.2rem rgba(var(--lp-orange-rgb),0.2);
}

/* ── Light theme overrides ────────────────────────────────────────────────── */
/* Applied when JS sets data-theme="light" on <html>.                         */
[data-theme="light"] {
    --lp-bg:      #edf2f9;   /* blue-tinted page bg — clearly distinct from white cards */
    --lp-bg-card: #ffffff;
    --lp-bg-card2:#dfe9f6;   /* input / secondary surface — visible contrast on white */
    --lp-text:    #0f172a;
    --lp-muted:   #485e79;   /* darker than before for legibility */
    --lp-border:  #b2c5d8;   /* strong enough to actually see structural lines */
    --check-panel-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.14);

    /* ── Orange accent — darkened for legibility on light surfaces ── */
    --lp-orange:         #b45309;   /* amber-700 — 4.6:1 on white, passes WCAG AA */
    --lp-orange-dim:     #92400e;   /* amber-800 — hover/active pressed state */
    --lp-orange-rgb:     180, 83, 9;
    --lp-orange-dim-rgb: 146, 64, 14;

    /* ── RGB channel overrides — text/muted shift in light mode ── */
    --lp-text-rgb:  15, 23, 42;
    --lp-muted-rgb: 72, 94, 121;

    --lp-hover-bg:         rgba(0,0,0,0.07);
    --lp-hover-bg-strong:  rgba(0,0,0,0.12);
    --lp-btn-bg:           rgba(0,0,0,0.08);
    --lp-btn-border:       rgba(0,0,0,0.22);
    --lp-btn-border-hover: rgba(0,0,0,0.42);
    --lp-dropdown-bg:      #ffffff;

    --bs-btn-close-filter: none;
}