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

:root {
  /* Colors */

  --blue: #1990C4;
  --light-aqua: #a3d3e8;
  --light-aqua-alt: #a3d3e8;
  --dark-aqua: #07638c;

  --blue-green: #07638c;
  --blue-gray: #f1fbff;

  --light-gray: #f2f2f2;
  --dark-gray: #393939;
  --text-gray: #7e7d7d;

  --primary-color: var(--blue);
  --primary-alt: var(--dark-aqua);
  --primary-highlight: var(--light-aqua);
  --primary-highlight-alt: var(--light-aqua-alt);
  --primary-accent: var(--dark-aqua);

  --secondary-color: var(--blue-green);
  --secondary-alt: var(--blue-gray);

  --tertiary-color: var(--light-tan);
  --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 : Futura, 'Lato', sans-serif;
  --secondary-font : Futura, 'EB Garamond', 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: 40px;
  --nav-tablet: 60px;
  --nav-desktop: 60px;

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