/* ================== */
/*  GLOBAL VARIABLES  */
/* ================== */

:root /* The "global variables" of the site. */
{
  /* COLORS */
  --color-white: #FFFFFF; /* Pure white. */
  --color-black: #000000; /* Pure black. */
  --color-near-white: #FAFAFA; /* Primary background color. */
  --color-light-gray: #F2F2F2; /* Another background color used for "contrast" in small areas. */
  --color-dark-gray: #383838; /* Used in the footer and as the color for most fonts. */
  --color-accent-orange: #E69319; /* Used as an "attention" color for buttons, titles, etc. */
  --color-accent-orange-light: #EFC384; /* A lighter orange that is used for "less obvious" highlights (e.g. links change to this color on hover, etc.). */
  

  /* TYPOGRAPHY */
  --font-base: "Times New Roman", serif; /* The default font (and fallbacks). */
  --font-color: var(--color-dark-gray); /* The default font color. */

  /* Note: default font size set in "layout.css" which is equal to 1 rem. */  
  --font-size-m: 1rem; 
  --font-size-l: 1.2rem;
  --font-size-xl: 1.7rem; 
  
  --font-size-title: var(--font-size-xl);
  --font-size-subtitle: var(--font-size-l);
  --font-size-section-heading: var(--font-size-m);
  --font-size-paragraph: var(--font-size-m);

  /* SPACING, MARGIN, & PADDING */
  --space-none: 0rem;
  --space-xs: 0.5rem; 
  --space-s: 0.75rem;
  --space-m: 1rem; 
  --space-l: 1.5rem; 

  --default-element-spacing: var(--space-l); /* Default internal/external padding/margin for elements. */
}