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

:root {
  /* Colors */
  --dark-green: #2D3522;
  --tan: #EAE6DE;
  --moss-green: #7B9669;

  --dark-teal: #2F544F;
  --light-teal: #6E8481;

  --light-green: #B9C8B1;
  --blush: #DECEC4;

  --light-gray: #F0EDE9;
  --dark-gray: #2D2D2D;
  --text-gray: #7e7d7d;

  /* --------------- */

  --primary-color: var(--dark-green); /* link color, buttons, nav, footer, etc */
  --primary-alt: var(--dark-teal); /* link hover */
  --primary-highlight: var(--moss-green);
  --primary-highlight-alt: var(--light-teal);
  --primary-accent: var(--dark-gray);

  --secondary-color: var(--tan);
  --secondary-alt: var(--blush);

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

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

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

  @font-face {
    font-family: 'jaguar';
    src: url('fonts/Jaguar.woff') format('woff');
    font-display: swap; /* Recommended to prevent invisible text during load */
  }

  /* Font Family */
  --primary-font: futura-pt, Futura, sans-serif;
  --secondary-font: "jaguar", serif;
  --highlight-font: futura-pt, Futura, sans-serif;

  /* Font Weight */
  --fw-thin: 100;
  --fw-extra-light: 200;
  --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;

  /* Sizing
     Note: If changing any of these default values, make sure to update the Module Breakpoints in WordPress' Sitewide Settings.
     $desktop and $full were originally computed via a Sass function (base + 80px); resolved to static values here. */
  --tablet: 768px;
  --desktop: 1060px;
  --full: 1550px;

  --sidebar: 300px;

  --nav-mobile: 92px;
  --nav-tablet: 158px;
  --nav-desktop: 158px;

  /* Increasing color */
  --step: 1;

  /* Defaults */
  --default-font: var(--primary-font);
  --default-color: var(--dark-color);
}