/* ============================================================================
   THE PRESTIGE - Dark Theme

   Mystique Dining immersive dinner theater in West Jordan, UT.
   Brand: Black backgrounds with gold/bronze accents.
   Fonts: Cinzel (elegant serif headings), Montserrat (clean sans body)
   Source: https://mystiquedining.com/west-jordan-home
   ============================================================================ */

/* FONTS - Cinzel + Montserrat via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  /* ========================================================================
     BRAND COLORS - The Prestige gold & bronze palette
     ======================================================================== */

  --color-brand: rgb(252, 212, 124);            /* #FCD47C - Gold (buttons, links, accents) */
  --color-brand-secondary: rgb(232, 165, 87);   /* #E8A557 - Bronze */


  /* ========================================================================
     NEUTRAL COLORS - Dark theme defaults
     ======================================================================== */

  --color-light: rgb(230, 230, 230);   /* Light gray for light elements */
  --color-dark: rgb(38, 38, 38);       /* Dark gray for backgrounds */
  --color-white: rgb(255, 255, 255);   /* Pure white */
  --color-black: rgb(0, 0, 0);        /* Pure black */


  /* ========================================================================
     FONT FAMILIES - Cinzel serif headings, Montserrat sans body
     ======================================================================== */

  --font-family-heading: "Cinzel", "Georgia", serif;           /* Headers and titles */
  --font-family-body: "Montserrat", "Helvetica", sans-serif;   /* Body text */
  --font-family-nav: "Montserrat", "Helvetica", sans-serif;    /* Navigation menu */


  /* ========================================================================
     BUTTON STYLING
     ======================================================================== */

  --button-primary-color: var(--color-brand);
  --button-primary-label-color: var(--color-black);  /* Dark text on bright gold button */
  --button-primary-font-family: var(--font-family-body);


  /* ========================================================================
     HEADER & NAVIGATION
     ======================================================================== */

  --header-primary-color: var(--color-black);        /* Dark header background */
  --header-line-color: var(--color-brand);           /* Gold border */
  --header-link-color: var(--color-white);           /* Light links */
  --header-link-color-hover: var(--color-brand);     /* Gold on hover */
  --header-logo-width: 150px;                        /* Logo width */

  --primary-nav-font-family: var(--font-family-nav);
  --primary-nav-font-size: 18px;
  --primary-nav-font-weight: 500;


  /* ========================================================================
     THEME COLORS
     Used throughout the application for consistency
     ======================================================================== */

  --primary-theme-color: var(--color-brand);
  --secondary-theme-color: var(--color-brand-secondary);


  /* ========================================================================
     CALENDAR
     ======================================================================== */

  --calendar-primary-color: var(--color-black);
  --calendar-secondary-color: var(--color-white);


  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  --primary-heading-font-family: var(--font-family-heading);
  --primary-text-font-family: var(--font-family-body);
  --show-date-font-family: var(--font-family-heading);


  /* ========================================================================
     FOOTER
     ======================================================================== */

  --footer-primary-color: var(--color-brand);


  /* ========================================================================
     GUEST UI - DARK MODE VARIABLES
     These variables control the dark mode appearance of guest-facing UI
     ======================================================================== */

  /* Body & Backgrounds */
  --g-body-primary: var(--color-black);             /* Main background color */
  --g-bg-input: var(--color-dark);                  /* Input field backgrounds */

  /* Checkout Sidebar */
  --g-body-checkout-sidebar: var(--color-black);    /* Checkout sidebar background */

  /* Text & Foreground */
  --g-fg-primary: rgb(255, 255, 255);               /* Primary text color */
  --g-fg-disclaimer: rgb(255, 255, 255);            /* Disclaimer text */

  /* Header */
  --g-header-primary: var(--color-black);           /* Header background */
  --g-header-link: rgb(255, 255, 255);              /* Header link color */
  --g-header-link-hover: var(--color-brand);        /* Header link hover */

  /* Tables */
  --g-table-available: rgb(255, 255, 255);          /* Available table text */
  --g-table-disabled: rgb(64, 64, 64);              /* Disabled table color */
  --g-table-notFitMinimum: rgb(64, 64, 64);         /* Tables that don't fit party size */

  /* Calendar */
  --g-calendar-bg-active: var(--color-black);       /* Active date background */
  --g-calendar-fg-active: rgb(255, 255, 255);       /* Active date text */
  --g-calendar-perf-link: rgb(255, 255, 255);       /* Performance links */

  /* Borders */
  --g-border-color: rgba(238, 237, 236, 0.2);      /* Subtle borders in dark mode */


  /* ========================================================================
     DARK MODE FLAG
     This tells the system to use dark mode styling
     ======================================================================== */

  --mode: dark;
}