:root {
  /* Base color values */

  --color--base--light-blue: #0058cc;
  --color--base--dark-blue: #002c66;

  --color--base--cta: var(--color--base--light-blue);

  --color--grayscale--black: #060709;
  --color--grayscale--white: #ffffff;
  --color--grayscale--01: #f9f9f9;
  --color--grayscale--02: #eeeeee;
  --color--grayscale--03: #e1e1e1;
  --color--grayscale--04: #bababa;
  --color--grayscale--05: #999999;
  --color--grayscale--06: #747474;
  --color--grayscale--07: #4d4d4d;
  --color--grayscale--08: #2c2c2c;
  --color--grayscale--09: #191919;
  
  --color--status--positive: #a5f1ad;
  --color--status--positive-light: rgba(165, 241, 173, 0.30);
  --color--status--positive-dark: #12881e;
  --color--status--warning: #f4dd88;
  --color--status--warning-light: rgba(244, 221, 136, 0.30);
  --color--status--warning-dark: #a55f0d;
  --color--status--negative: #fd8a8a;
  --color--status--negative-light: rgba(253, 138, 138, 0.30);
  --color--status--negative-dark: #bc3c1f;
  --color--status--info: #b8b8ea;
  --color--status--info-light: rgba(184, 184, 234, 0.50);
  --color--status--info-dark: #4644e9;

  /* Semantic colors */

  --color--primary-base: var(--color--base--dark-blue);
  --color--primary-dark: var(--color--grayscale--black);
  --color--primary-light: var(--color--base--light-blue);

  --color--background-base: var(--color--grayscale--01);
  --color--background-light: var(--color--grayscale--white);
  --color--background-dark: var(--color--base--dark-blue);

  --color--ui-info-light: var(--color--status--info-light);
  --color--ui-info-base: var(--color--status--info);
  --color--ui-info-dark: var(--color--status--info-dark);
  --color--ui-danger-light: var(--color--status--negative-light);
  --color--ui-danger-base: var(--color--status--negative);
  --color--ui-danger-dark: var(--color--status--negative-dark);
  --color--ui-success-light: var(--color--status--positive-light);
  --color--ui-success-base: var(--color--status--positive);
  --color--ui-success-dark: var(--color--status--positive-dark);

  --color--text: var(--color--grayscale--black);
  --color--text-inverse: var(--color--grayscale--white);
  --color--text-alt: var(--color--grayscale--07);
  --color--text-brand: var(--color--base--light-blue);

  --color-hover: rgba(0, 88, 204, 0.03);

  /* Font & typography */
  
  --font-size--large: 1.125rem;
  --font-size--base: 1rem;
  --font-size--small: 1rem;
  --font-size--x-small: 0.875rem;
  --font-size--xx-small: 0.75rem;
  
  --font-size--title: 4.3125rem;
  --font-size--h1: 3.375rem;
  --font-size--h2: 2.75rem;
  --font-size--h3: 2.1875rem;
  --font-size--h4: 1.75rem;
  --font-size--h5: 1.375rem;
  --font-size--h6: var(--font-size--small);

  --font-weight--normal: 400;
  --font-weight--semibold: 600;
  --font-weight--bold: 700;

  --font-family--body: "DM Sans", sans-serif, system-ui;
  --font-family--body-italic: "DM Sans Italic", sans-serif, system-ui;
  --font-family--heading: "DM Sans", sans-serif, system-ui;

  --line-height--base: 1.45;
  --line-height--tight: 1.15;

  /* Borders */

  --border-radius--small: 0.25rem;
  --border-radius--base: 0.5rem;
  --border-radius--large: 1.5rem;
  --border-radius--pill: 4rem;
  --border-radius--circle: 100%;

  --border-width--base: 1px;
  --border-width--thick: 2px;

  --border--base: var(--border-width--base) solid var(--color--grayscale--05);
  --border--light: var(--border-width--base) solid var(--color--grayscale--03);

  /* Container sizing */

  --container--base: 50rem;
  --container--large: 85rem;

  /* Spacing & sizing */

  --space--xx-small: 0.25rem;
  --space--x-small: 0.5rem;
  --space--small: 0.75rem;
  --space--base: 1rem;
  --space--medium: 1.5rem;
  --space--large: 2rem;
  --space--x-large: 3rem;
  --space--xx-large: 4rem;

  /* Transitions */

  --transition-duration--fast: 0.1s;
  --transition-duration--base: 0.2s;
  --transition-timing--base: ease-in-out;

/* z-index */

  --z-index--basement: -999999;
  --z-index--base: 1;
  --z-index--layout: 1000;
  --z-index--modal: 4000;
  --z-index--ceiling: 999999;

  /* Shadows */

  --shadow-01: 0px 2px 3px rgba(0, 0, 0, 0.08);

  /* Breakpoints
    
    CSS custom properties (variables) cannot be used for breakpoint values,
    however, to make debugging easier and to stay consistent, try to stick to
    these values when delaring breakpoints throughout the codebase.
  
    x-small: 320px;
    small: 600px; - Used for mobile layout
    medium: 820px;
    large: 1000px;
  */
}