/* ================================================================
   VIP Booking — CSS Design Tokens  (variables.css)
   ================================================================ */

:root {

   /* ── Group 1 · Astra Theme Integration ────────────────────
       Frontend & User Dashboard inherit the active Astra palette.
       Fallback values match Astra defaults so the plugin looks
       correct even if the theme is switched.
    ──────────────────────────────────────────────────────────── */
   --vb-primary: var(--ast-global-color-0, #d7b58c);
   --vb-primary-hover: var(--ast-global-color-1, #c8985c);
   --vb-text-heading: var(--ast-global-color-2, #cccccc);
   --vb-text: var(--ast-global-color-3, #888888);
   --vb-primary-bg: var(--ast-global-color-4, #0f0f0f);
   --vb-second-bg: var(--ast-global-color-5, #262626);
   --vb-border: var(--ast-global-color-8, #5c4e3d85);

   /* ── Group 2 · Semantic Base Colours ───────────────────────
       One canonical colour per semantic role.
       Used for status indicators, buttons, and badges.
    ──────────────────────────────────────────────────────────── */
   --vb-blue: #166fc8;
   --vb-green: #188e36;
   --vb-red: #b0180d;
   --vb-orange: #ff9800;
   --vb-gray: #7d7d7d;
   --vb-black: #1a1a1a;
   --vb-black-muted: #5a5a5a;
   --vb-white: #f5f5f5;
   --vb-white-muted: #d1d1d1;

   /* ── Group 3 · Transparency Scale ─────────────────────────
       Unified light → dark spectrum.
       · trans-border  glass border line
       · trans-1       lightest glass fill
       · trans-2       light glass fill
       · trans-3       dark tint 
       · trans-4       medium overlay
       · trans-5       heavy backdrop
    ──────────────────────────────────────────────────────────── */
   --vb-trans-1: rgba(255, 255, 255, 0.08);
   --vb-trans-2: rgba(255, 255, 255, 0.20);
   --vb-trans-3: rgba(0, 0, 0, 0.166);
   --vb-trans-4: rgba(0, 0, 0, 0.39);
   --vb-trans-5: rgba(0, 0, 0, 0.561);
}