/* ============================================================================
   LOCAL NOTE JAZZ — Dark Theme

   Intimate jazz club / cocktail-lounge vibe: a pure-black canvas with warm
   gold accents and classic serif type — vintage-elegant speakeasy feel.

   Brand colors : #ECAC50 gold/amber accent on black, white text
   Fonts        : Marcellus (headings) + PT Serif (body/nav) via Google Fonts
   Source       : https://localnotejazz.com/
   ============================================================================ */

/* FONTS — Marcellus + PT Serif (Google Fonts), matching the venue's own site. */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ========================================================================
     BRAND COLORS - Local Note Jazz (gold/amber on black)
     ======================================================================== */

  --color-brand: rgb(236, 172, 80);            /* Gold/amber (buttons, links, accents) */
  --color-brand-secondary: rgb(230, 146, 25);  /* Deeper amber (secondary accent) */


  /* ========================================================================
     NEUTRAL COLORS - Dark theme (near-black + white)
     ======================================================================== */

  --color-light: rgb(240, 240, 240);   /* Near-white for light elements */
  --color-dark: rgb(13, 13, 13);       /* Near-black background */
  --color-white: rgb(255, 255, 255);   /* Pure white */
  --color-black: rgb(0, 0, 0);         /* Pure black */


  /* ========================================================================
     FONT FAMILIES - Marcellus + PT Serif (Google Fonts)
     ======================================================================== */

  --font-family-heading: "Marcellus", serif;   /* Headers and titles */
  --font-family-body: "PT Serif", serif;        /* Body text */
  --font-family-nav: "Marcellus", serif;        /* Navigation menu */


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

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


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

  --header-primary-color: var(--color-dark);         /* Header background (matches body) */
  --header-line-color: transparent;                  /* Header border hidden */
  --header-link-color: var(--color-white);           /* White links */
  --header-link-color-hover: var(--color-brand);     /* Gold on hover */
  --header-logo-width: 100px;                        /* 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);
  --primary-theme-bg-color: var(--color-dark);       /* Dark page background */


  /* ========================================================================
     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-dark);              /* Main background color */
  --g-bg-input: rgb(38, 38, 38);                    /* Elevated field surface (distinct from body) */

  /* 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-dark);            /* Header background (matches body) */
  --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.4);      /* Borders (~3.4:1 on bg — meets WCAG 3:1) */


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

  --mode: dark;
}