/* ============================================================================
   LIGHT THEME TEMPLATE

   A clean, simple template for creating light-themed venue CSS files.

   HOW TO USE:
   1. Choose 2-3 fonts from Google Fonts (uncomment and update the @import)
   2. Set your brand colors in the "BRAND COLORS" section
   3. Adjust neutral colors if needed
   4. The rest of the variables will automatically use your brand colors

   QUICK START - Only change these:
   - Google Fonts URL
   - --color-brand (your primary brand color)
   - --color-brand-secondary (optional accent color)
   - Font family names
   ============================================================================ */

/* FONTS
   Uncomment and update with your Google Fonts URL
   Common combinations:
   - Oswald + Roboto Slab
   - Playfair Display + Open Sans
   - Montserrat + Roboto
   - Work Sans + Lora
*/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&display=swap');

:root {
  /* ========================================================================
     BRAND COLORS - Change these to match your venue's brand
     ======================================================================== */

  --color-brand: rgb(86, 76, 227);   /* Optional secondary brand color */
  --color-brand-secondary: rgb(251, 185, 32);             /* Primary brand color (buttons, links, accents) */
  

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

  --color-light: rgb(245, 243, 239);   /* Light gray for backgrounds */
  --color-dark: rgb(38, 38, 38);       /* Dark gray for text */
  --color-white: rgb(255, 255, 255);   /* Pure white */
  --color-black: rgb(0, 0, 0);         /* Pure black */


  /* ========================================================================
     FONT FAMILIES
     Update these to match your Google Fonts import
     ======================================================================== */

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


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

  --button-primary-color: var(--color-brand);
  --button-primary-label-color: var(--color-white);
  --button-primary-font-family: var(--font-family-heading);


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

  --header-primary-color: var(--color-brand-secondary);        /* Header background */
  --header-line-color: var(--color-brand-secondary);           /* Header border */
  --header-link-color: var(--color-black);           /* Header links */
  --header-link-color-hover: var(--color-brand);    /* Header links on hover */
  --header-logo-width: 180px;                       /* Logo width */

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


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


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

  --calendar-primary-color: var(--color-dark);
  --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-black);


  /* ========================================================================
     GUEST UI OVERRIDES (Optional)
     Light themes typically need minimal guest UI overrides
     ======================================================================== */

  --g-bg-input: var(--color-light);              /* Input field backgrounds */
  --g-body-checkout-sidebar: var(--color-brand-secondary); /* Checkout sidebar background */
  --g-border-color: rgba(0, 0, 0, 0.2);     

}