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

:root {
  /* Colors */

  --seafoam: #BDDFD8;
  --cream: #F8F5F1;
  --teal: #2C8E98;

  --gold: #DA9D44;

  --light-gray: #E8F0F2;
  --dark-gray: #000000;
  --text-gray: #000000;

  --primary-color: var(--seafoam);
  --primary-alt: var(--seafoam);
  --primary-highlight: var(--cream);
  --primary-highlight-alt: var(--cream);
  --primary-accent: var(--teal);

  --secondary-color: var(--gold);
  --secondary-alt: var(--gold);

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

  --text-color: var(--dark-gray);

  --light-color: #ffffff;
  --dark-color: #000000;
  --light-alt: var(--light-gray);
  --dark-alt: var(--dark-gray);

  /* Defaults */

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

  /* Font Family */

  --primary-font : gotham, sans-serif;
  --secondary-font : "Oswald", sans-serif;
  --highlight-font : gotham, sans-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: 93px;
  --nav-tablet: 55px;
  --nav-desktop: 55px;

  /* Breakpoints */

  --tablet: 768px;
  --og-desktop: 1024px;
  --og-full: 1280px;
  /* 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(--text-color);
  --menu-express-bg: var(--light-alt);
  /*--- Lighten the primary color by 5% ---*/
  --menu-express-bg-child: oklch(from var(--light-alt) calc(l + 0.025) c h);
  
  /*--- Lighten the primary color by 8% ---*/
  --menu-express-bg-grandchild: oklch(from var(--light-alt) calc(l + 0.028) c h);
  --menu-express-hover: oklch(from var(--light-alt) calc(l - 0.025) c h);

  /* Hamburger Deluxe Menu Styles */
  --menu-deluxe-font-size-parent: 20px;
  --menu-deluxe-font-size-child: 18px;
  --menu-deluxe-font-size-grandchild: 16px;
  --menu-deluxe-bg-parent: var(--light-alt);
  --menu-deluxe-text-parent: var(--text-color);
  --menu-deluxe-bg-hover-parent: var(--light-alt);
  --menu-deluxe-text-hover-parent: var(--primary-accent);
  --menu-deluxe-bg-child: rgb(from var(--light-alt) r g b / 0.85);
  --menu-deluxe-text-child:  var(--text-color);
  --menu-deluxe-bg-hover-child: transparent;
  --menu-deluxe-text-hover-child: var(--primary-accent);
  --menu-deluxe-bg-grandchild: transparent;
  --menu-deluxe-text-grandchild: var(--text-color);
  --menu-deluxe-bg-hover-grandchild: transparent;
  --menu-deluxe-text-hover-grandchild: var(--primary-accent);

  /* 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;
}