:root {
  /* BASES */
  --white: #f5f2f2;
  --bg-white: #f5f2f280;

  --black: #2b2a2a;
  --bg-black: #2b2a2a80;

  /* GREYS */
  --grey: #a4a4b5; /* mid grey */
  --bg-grey: #a4a4b5d1; /* translucent mid grey */

  --light-grey: #dfdde5; /* light neutral grey */
  --bg-light-grey: #dfdde580; /* translucent light grey */
  --bg-light-grey-solid: #f4f4f4;

  /* BRAND COLORS */
  --primary: #2e396c; /* Clarion Blue */
  --bg-primary: #2e396c80;

  --secondary: #d7932a; /* Clarion Orange */
  --bg-secondary: #d7932a;

  --accent: #c52656;
  --bg-accent: #d7932a80;

  /* STATUS COLORS (UTILITY) */
  --red: #cf2e2e;
  --bg-red: #cf2e2e80;

  --green: #3bbe8f;
  --bg-green: #3bbe8f80;

  --yellow: #d6d600;
  --bg-yellow: #d6d60080;

  /* Logo / Brandmark */
  --ft-logo: "OpenSans", sans-serif;

  /* Headings (H1–H6), Titles, Section Labels */
  --ft-primary: "OpenSans", sans-serif;

  /* Body Text, Paragraphs, UI Labels, Buttons */
  --ft-secondary: "DMSans", sans-serif;
}