/* ============================================================================
   STUDIO 251 THEME
   ============================================================================ */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ========================================================================
     BRAND COLORS
     ======================================================================== */

  --color-brand: rgb(180, 83, 9);             /* Warm amber/rust */
  --color-brand-secondary: rgb(146, 64, 14);  /* Deeper amber */


  /* ========================================================================
     NEUTRAL COLORS
     ======================================================================== */

  --color-light: rgb(245, 243, 240);   /* Warm off-white */
  --color-dark: rgb(41, 37, 36);       /* Warm dark gray */
  --color-white: rgb(255, 255, 255);   /* Pure white */
  --color-black: rgb(0, 0, 0);         /* Pure black */


  /* ========================================================================
     FONT FAMILIES
     ======================================================================== */

  --font-family-heading: "Bebas Neue", sans-serif;   /* Headers and titles */
  --font-family-body: "Inter", sans-serif;           /* Body text */
  --font-family-nav: "Bebas Neue", 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-white);        /* Header background */
  --header-line-color: var(--color-white);           /* Header border */
  --header-link-color: var(--color-dark);           /* Header links */
  --header-link-color-hover: var(--color-brand);    /* Header links on hover */
  --header-logo-width: 160px;                       /* Logo width */

  --primary-nav-font-family: var(--font-family-nav);
  --primary-nav-font-size: 20px;
  --primary-nav-font-weight: 400;


  /* ========================================================================
     THEME COLORS
     ======================================================================== */

  --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-brand);


  /* ========================================================================
     GUEST UI OVERRIDES
     ======================================================================== */

  --g-bg-input: var(--color-light);              /* Input field backgrounds */
  --g-body-checkout-sidebar: var(--color-light); /* Checkout sidebar background */
}