:root {
  /* Basic Colors */
  --white: #ffffff;
  --black: #000000;
  --text-color: #222; /* Default text color */

  /* Gray Shades */
  --gray: var(--text-color); /* Default gray */
  --gray--dark: #262626;     /* Dark gray */
  --gray--medium: #595959;
  --gray--light: #b3b3b3;     /* Light gray */
  --gray--xlight: #d9d9d9;    /* Extra light gray */
  --gray--cool: #63666a;
  --gray--line: #e4e4e4; /* Line separator gray */
  --gray--line-alt: #d8d8d8; /* Alternate line separator */
  --gray--bg: #f3f3f3; /* Background gray */

  /* Primary Colors */
  --primary-color: #004876; /* Main primary color */
  --primary-color--dark: color-mix(in srgb, var(--primary-color) 80%, black);   /* Example for darken 20% */
  --primary-color--light: lighten(var(--primary-color), 10%); /* Example for lighten 10% */

  /* Accent Colors */
  --accent-green: #5c8118;
  --accent-orange: #fe5000;
  --accent-red: #820012;
  --accent-yellow: #d9c756;
  --accent-blue: #015895;
  --accent-purple: var(--secondary--fuchsia);

  /* Message Colors */
  --message-success: #3c763d; /* Success message color */
  --message-warning: #e09600; /* Warning message color */
  --message-alert: #a94442; /* Alert message color */

  /* Brand Colors */
  --brand--dark-blue: #004876; /* Brand dark blue */
  --brand--dark-blue-alternative: #051c2c; /* Alternative dark blue */
  --brand--bright-blue: #00a9e0; /* Bright blue */

  /* Secondary Colors */
  --secondary--fuchsia: #a20067; /* Fuchsia */
  --secondary--green: var(--accent-green); /* Secondary green */

  /* Additional Accents */
  --accent--tan: #d9c756; /* Tan accent */
  --accent--steel: #4f758b; /* Steel blue accent */
  --extra-heavy-blue: #003455; /* Extra heavy blue */

  /* Pattern Colors */
  --pattern--blue: #003e6f; /* Pattern blue */
  --pattern--fuchsia: #85175d; /* Pattern fuchsia */

  /* Alert & Link Colors */
  --alert--red: var(--accent-red); /* Alert red */
  --link-color: #07c; /* Link color */

  /* Global width */
  --global-width: 75rem;

  /* Grid system */
  --xy-grid: true;
  --grid-container: var(--global-width);
  --grid-columns: 12;
  --grid-margin-gutters-initial: 1.25rem;
  --grid-margin-gutters-medium: 1.25rem;
  --grid-margin-gutters: var(--grid-margin-gutters-initial);
  --grid-padding-gutters: var(--grid-margin-gutters);
  --grid-container-padding: var(--grid-padding-gutters);
  --grid-container-max: var(--global-width);
  --xy-block-grid-max: 8;
  /* Transition and animation durations */
  --primary-transition-time: 125ms;
  --primary-transition-function: var(--bezier-ease--soft);
  --primary-transition: var(--primary-transition-time) var(--primary-transition-function);
  --primary-animation-time: 500ms;
  /* The default animation duration and timing function, with a slight delay for scroll lag */
  --primary-animation: var(--primary-animation-time) var(--primary-transition-function) 225ms;
  --bezier-ease: cubic-bezier(.82, .06, .14, .97);
  --bezier-ease--soft: cubic-bezier(.42, .08, .06, .98);
  --bezier-ease--swanky: cubic-bezier(1, .63, .47, .8);
  --bezier-ease--slingshot: cubic-bezier(.5, 0, .38, 1.47);
  --accordion-animation-duration: 400ms;
  --swiper-pagination-top: 8px;
   /* fonts */
  --serif: 'Chronicle Text G2 A', 'Chronicle Text G2 B', helvetica, serif;
  --sans-serif: 'ars-maquette-web', georgia, sans-serif;
  --font-awesome: 'Font Awesome 6 Pro';
  --font-awesome-duotone: 'Font Awesome 6 Duotone';
  --font-awesome-brands: 'Font Awesome 6 Brands';
  --mobile-header-height: 4.25rem;
  --desktop-header-height: 10.375rem;
  --sticky-header-height: 6.25rem;
  --spacing--4xsmall: 0;
  --spacing--3xsmall: 0.3125rem;
  --spacing--2xsmall: 0.625rem;
  --spacing--xsmall: 0.9375rem;
  --spacing--small: 1.25rem;
  --spacing--small-medium: 1.5625rem;
  --spacing--medium: 1.875rem;
  --spacing--default: 2.5rem;
  --spacing--large: 3.125rem;
  --spacing--xlarge: 3.75rem;
  --spacing--2xlarge: 5rem;
  --spacing--3xlarge: 6.25rem;
  --spacing--4xlarge: 7.5rem;
  --spacing--5xlarge: 9.375rem;
  --spacing: var(--spacing--default);
  --aspect-ratio: 1;



  /* Foundation palette */
  --foundation-primary: var(--primary-color);
  --foundation-secondary: #767676;
  --foundation-success: var(--message-success);
  --foundation-warning: #ffae00;
  --foundation-alert: var(--message-alert);

  /* Grays (aliases for variables.css) */
  --light-gray: var(--gray--light);
  --medium-gray: var(--gray);
  --dark-gray: var(--gray--dark);
  --foundation-black: var(--black);
  --foundation-white: var(--white);


  /* Hero Styles */
  --hero-content-width: 660px;
  --gradient-blue: #004976;
  --gradient-blue--dark: #003455;
  --hero-background-fallback: var(--pattern--blue);
  --title-font: var(--serif);
  --subtitle-font: var(--sans-serif);
}