/* ------------------------
   Variables
------------------------ */

:root {
  /* Colors */

  --charcoal-black: #201D1B;
  --ivory-white: #F4F1EC;
  --stone-gray: #DCD9D0;
  --gold: #C3A77B;
  --dark-gold: #8C6A48;
  --black: #000000;
  --light-gray: #E1E1E1;

  --primary-color: var(--dark-gold);
  --primary-alt: var(--gold);
  --primary-highlight: var(--gold);
  --primary-highlight-alt: var(--gold);
  --primary-accent: var(--gold);

  --secondary-color: var(--charcoal-black);
  --secondary-alt: var(--black);

  --tertiary-color: var(--stone-gray);
  --tertiary-alt: var(--light-gray);

  --text-color: var(--charcoal-black);

  --light-color: #ffffff;
  --dark-color: #000000;
  --light-alt: var(--ivory-white);
  --dark-alt: var(--charcoal-black);

  /* Defaults */

  --default-font: var(--primary-font);
  --default-color: var(--text-color);

  /* Font Family */

  --primary-font : lato, sans-serif;
  --secondary-font : playfair-display, serif;
  --highlight-font : Futura, TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;

  /* Font Weight */

  --fw-thin: 100;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-heavy: 900;

  --nav-mobile: 60px;
  --nav-tablet: 65px;
  --nav-desktop: 65px;

  /* Breakpoints */

  --tablet: 768px;
  --og-desktop: 1024px;
  /* --og-full: 1280px; */
  --og-full: 1480px;
  /* larger? 1536px */
  --desktop: calc( var(--og-desktop) + 80px );
  --full: calc( var(--og-full) + 80px );

  /* Variables and Color Options For the Navigation Menu */
  --nav-panel-phone-width: calc(100vw - 80px);
  --nav-panel-tablet-width: 50vw;
  --nav-panel-desktop-width: 500px;

  /* Hamburger Express Menu AND All Mobile Styles */
  --menu-express-font-size-parent: 26px;
  --menu-express-font-size-child: 20px;
  --menu-express-font-size-grandchild: 16px;
  --menu-express-text-color: var(--light-color);
  --menu-express-bg: var(--primary-color);
  /*--- Darkens the primary color by 5% ---*/
  --menu-express-bg-child: oklch(from var(--primary-color) calc(l - 0.05) c h);
  /*--- Darkens the primary color by 8% ---*/
  --menu-express-bg-grandchild: oklch(from var(--primary-color) calc(l - 0.08) c h);
  --menu-express-hover: var(--primary-alt);

  /* Hamburger Deluxe Menu Styles */
  --menu-deluxe-font-size-parent: 26px;
  --menu-deluxe-font-size-child: 26px;
  --menu-deluxe-font-size-grandchild: 22px;
  --menu-deluxe-bg-parent: green;
  --menu-deluxe-text-parent: lime;
  --menu-deluxe-bg-hover-parent: olive;
  --menu-deluxe-text-hover-parent: yellow;
  --menu-deluxe-bg-child: navy;
  --menu-deluxe-text-child:  aqua;
  --menu-deluxe-bg-hover-child: teal;
  --menu-deluxe-text-hover-child: fuchsia;
  --menu-deluxe-bg-grandchild: orange;
  --menu-deluxe-text-grandchild: maroon;
  --menu-deluxe-bg-hover-grandchild: red;
  --menu-deluxe-text-hover-grandchild: purple;

  /* Top Menu Styles */
  --menu-top-font-size-parent: 16px;
  --menu-top-font-size-child: 16px;
  --menu-top-font-size-grandchild: 16px;
  --mega-menu-font-size-child: 20px;
  --mega-menu-font-size-grandchild: 16px;
  --menu-top-bg-parent: navy;
  --menu-top-text-parent: silver;
  --menu-top-bg-hover-parent: silver;
  --menu-top-text-hover-parent: black;
  --menu-top-fixed-bg-parent: yellow;
  --menu-top-fixed-text-parent: maroon;
  --menu-top-fixed-bg-hover-parent: maroon;
  --menu-top-fixed-text-hover-parent: yellow;
  --menu-top-bg-child: green;
  --menu-top-text-child: lime;
  --menu-top-bg-hover-child: blue;
  --menu-top-text-hover-child: aqua;
  --menu-top-bg-grandchild: orange;
  --menu-top-text-grandchild: red;
  --menu-top-bg-hover-grandchild: purple;
  --menu-top-text-hover-grandchild: fuchsia;
}