/* ============================================================================
   WINNIE'S JAZZ CLUB

   Art Deco jazz club — golden-age glamour on a warm, moody ground.
   Brand: antique gold (#D9B56C) on a warm near-black (#2B2625).
   Font: Mostra Nuova, an Art Deco geometric sans, via Adobe Fonts.

   Source: https://winniesjazzclub.com
   ============================================================================ */

@import url("https://use.typekit.net/wae1ljt.css");

:root {
  /* ========================================================================
     BRAND COLORS - Winnie's antique gold
     ======================================================================== */

  --color-brand: rgb(217, 181, 108);            /* #D9B56C - buttons, links, accents */
  --color-brand-secondary: rgb(196, 152, 58);   /* #C4983A - deeper gold for borders */


  /* ========================================================================
     NEUTRAL COLORS - Warm dark theme
     ======================================================================== */

  --color-light: rgb(240, 236, 230);   /* Warm off-white for light elements */
  --color-dark: rgb(43, 38, 37);       /* #2B2625 - warm near-black background */
  --color-white: rgb(255, 255, 255);   /* Pure white */
  --color-black: rgb(25, 22, 21);      /* #191615 - deepest warm black */


  /* ========================================================================
     FONT FAMILIES - Mostra Nuova via Adobe Fonts
     ======================================================================== */

  --font-family-heading: "mostra-nuova", sans-serif;    /* Headers and titles */
  --font-family-body: "mostra-nuova", sans-serif;       /* Body text */
  --font-family-nav: "mostra-nuova", sans-serif;        /* Navigation menu */


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

  --button-primary-color: var(--color-brand);
  --button-primary-label-color: var(--color-dark);  /* Warm dark text on gold button */
  --button-primary-font-family: var(--font-family-heading);


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

  --header-primary-color: var(--color-dark);        /* Dark header background */
  --header-line-color: var(--color-dark); /* Deeper gold border */
  --header-link-color: var(--color-light);           /* Warm off-white 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: 400;


  /* ========================================================================
     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-light);


  /* ========================================================================
     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-dark);              /* 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: var(--color-light);               /* Primary text color */
  --g-fg-disclaimer: var(--color-light);            /* Disclaimer text */

  /* Header */
  --g-header-primary: var(--color-dark);           /* Header background */
  --g-header-link: var(--color-light);              /* Header link color */
  --g-header-link-hover: var(--color-brand);        /* Header link hover */

  /* Tables */
  --g-table-available: var(--color-light);          /* Available table text */
  --g-table-disabled: rgb(92, 84, 80);              /* Disabled table color */
  --g-table-notFitMinimum: rgb(92, 84, 80);         /* Tables that don't fit party size */

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

  /* Borders */
  --g-border-color: rgba(217, 181, 108, 0.6);       /* Gold borders, 3:1 against the ground */


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

  --mode: dark;
}