:root {
  /*--- Theme colors ---*/

  --r3-primary: hsla(30, 85%, 52%, 1);
  --r3-primary-hover: hsla(30, 92%, 47%, 1);
  --r3-light: hsla(0, 0%, 99%, 1);
  --r3-dark: hsla(216, 6%, 15%, 1);
  --r3-dark-accent: hsla(214, 21%, 15%, 1);

  --r3-grey-50: hsla(210, 20%, 98%, 1);
  --r3-grey-100: hsla(220, 14%, 96%, 1);
  --r3-grey-200: hsla(220, 13%, 91%, 1);
  --r3-grey-300: hsla(216, 12%, 84%, 1);
  --r3-grey-400: hsla(218, 11%, 65%, 1);
  --r3-grey-500: hsla(215, 16%, 47%, 1);
  --r3-grey-600: hsla(215, 19%, 35%, 1);
  --r3-grey-700: hsla(215, 25%, 27%, 1);
  --r3-grey-800: hsla(217, 33%, 17%, 1);
  --r3-grey-900: hsla(222, 47%, 11%, 1);

  --r3-success: hsla(85, 85%, 35%, 1);
  --r3-success-hover: hsla(86, 78%, 27%, 1);

  --r3-warning: hsla(0, 72%, 51%, 1);
  --r3-warning-hover: hsla(0, 74%, 42%, 1);

  --r3-disabled: var(--r3-grey-400);

  /* Brand Color */

  --dxp-g-brand: var(--r3-primary);
  --dxp-g-brand-contrast: var(--r3-light);

  /* Brand Hover state */

  --dxp-g-brand-1: var(--r3-primary-hover);
  --dxp-g-brand-1-contrast: var(--r3-light);

  /* Links */

  --dxp-c-link-text-color: none;
  --dxp-s-link-text-color: none;
  --dxp-s-link-text-color-hover: var(--dxp-g-brand);

  /* Body text */

  --r3-body-color: var(--r3-grey-800);

  /*--- Theme Typography ---*/

  --r3-font-family: "Nunito", sans-serif;
  /* --dxp-g-root-font-family: var(--r3-font-family); */

  --dxp-s-body-font-weight: 300;
  --dxp-s-body-font-size: 1.125rem; /* 18px */

  --r3-text-xs: 0.75rem;  /* 12px */

  --r3-text-s: 0.875rem;  /* 14px */
 
  --r3-text-base: 1rem; /* 16px */

  --r3-text-md: 1.125rem;  /* 18px */

  --r3-text-lg: 1.5rem;  /* 24px */

  --r3-text-xl: 1.875rem;  /* 30px */

  --r3-text-2xl: 2.25rem;  /* 36px */

  --r3-text-3xl: 3rem;  /* 48px */

  /*--- Theme Spacing ---*/

  --r3-max-width: 1440px;

  --r3-space-2: 0.5rem; /* 8px */
  --r3-space-2-5: 0.625rem; /* 10px */
  --r3-space-3: 0.75rem;
  --r3-space-3-5: 0.875rem;
  --r3-space-4: 1rem;
  --r3-space-5: 1.25rem; /* 20px */
  --r3-space-6: 1.5rem; /* 24px */
  --r3-space-7: 1.75rem;
  --r3-space-8: 2rem;
  --r3-space-9: 2.25rem;
  --r3-space-10: 2.5rem;
  --r3-space-11: 2.75rem; /* 44px */
  --r3-space-12: 3rem;
  --r3-space-14: 3.5rem; /* 56px */
  --r3-space-16: 4rem;
  --r3-space-20: 5rem;
  --r3-space-24: 6rem;
  --r3-space-28: 7rem;
  --r3-space-32: 8rem;
  --r3-space-36: 9rem;
  --r3-space-40: 10rem;
  --r3-space-44: 11rem;
  --r3-space-48: 12rem;
  --r3-space-52: 13rem;
  --r3-space-56: 14rem;
  --r3-space-60: 15rem;

  /*--- Breakpoints ---*/

  --r3-breakpoint-tablet: 48rem; /*798px*/

  /*--- Border Radius ---*/

  --r3-border-radius-sm: 0.5rem; /* 8px */
  --r3-border-radius-lg: 0.625rem; /* 10px */
  --r3-border-radius-xl: 1.24rem;
  --r3-border-radius-full: 2000px;

  /*--- Transitions ---*/

  --r3-transition-base: all 0.2s ease-in-out;

  /*--- Box Shadow ---*/

  --r3-box-shadow: 0px 4px 17px rgba(37, 39, 42, 0.11);
}

/*------ Utility Classes ------*/

ul.r3-unordered-list {
  list-style-position: inside; /* Aligns the bullet inside the text block */
}

ul.r3-unordered-list li {
  text-indent: -20px; /* Pulls the first line to the left */
  margin-left: 20px; /* Pushes content (including wrapped lines) to the right */
} 

a.r3-link {
  display: flex;
  gap: var(--r3-space-2-5);
  text-decoration: none;
}

a.r3-link_dark {
  --dxp-c-link-text-color: var(--r3-dark);
  --dxp-s-link-text-color: var(--r3-dark);
  color: var(--r3-body-color);
}

a.r3-link_light {
  --dxp-c-link-text-color: var(--r3-light);
  --dxp-s-link-text-color: var(--r3-light);
  fill: var(--r3-light);
}

a.r3-link:hover {
  color: var(--dxp-g-brand);
}

.r3-background-color-fill-light {
  background-color: var(--r3-grey-100);
}

a.r3-link_active {
  color: var(--r3-primary);
}

.r3-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.75px;
}

.r3-button-icon_primary use {
  fill: var(--dxp-g-brand);
  stroke: none;
}

.r3-button-icon_light use {
  fill: var(--r3-light);
  stroke: none;
}

.r3-button-icon_dark use {
  fill: var(--r3-dark);
  stroke: none;
}

.r3-button-icon_grey use {
  fill: var(--r3-grey-800);
  stroke: none;
}

.r3-button-icon_primary_stroke use {
  fill: none;
  stroke: var(--dxp-g-brand);
}

.r3-button-icon_light_stroke use {
  fill: none;
  stroke: var(--r3-light);
}

.r3-button-icon_dark_stroke use {
  fill: none;
  stroke: var(--r3-dark);
}

.r3-button-icon_grey_stroke use {
  fill: none;
  stroke: var(--r3-grey-800);
}

.r3-separator_vertical {
  background-color: var(--r3-grey-500);
  width: 1px;
  height: 2rem;
}
.r3-light {
  color: var(--r3-light);
}

.r3-dark {
  color: var(--r3-dark);
}

.r3-button {
  font-size: var(--r3-text-md); 
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--r3-space-2);
  background: none;
  border: none;

  border-radius: var(--r3-border-radius-sm);

  white-space: nowrap;
  cursor: pointer;
  transition: var(--r3-transition-base);
}

.r3-button_primary {
  background-color: var(--dxp-g-brand);
  padding: var(--r3-space-4) var(--r3-space-5);
}

.r3-button_primary:hover {
  background-color: var(--dxp-g-brand-1);
}

.r3-button_secondary {
  border: 1px solid var(--r3-light);
  padding: var(--r3-space-4) var(--r3-space-5);
}

.r3-button_secondary:hover {
  border-color: var(--dxp-g-brand);
}

.r3-button_tertiary {
  padding: var(--r3-space-4) 0px;
}

.r3-button_success {
  background-color: var(--r3-success);
  padding: var(--r3-space-4) var(--r3-space-5);
} 

.r3-button_success:hover {
  background-color: var(--r3-success-hover);
}

.r3-button_warning {
  background-color: var(--r3-warning);
  padding: var(--r3-space-4) var(--r3-space-5);
}

.r3-button_warning:hover {
  color: var(--r3-warning-hover)
}

.r3-text-light {
  color: var(--r3-light);
}

.r3-text-dark {
  color: var(--r3-dark);
}

.r3-prevent-scroll {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

/* Text */

h1 {
  font-size: var(--r3-text-3xl);
  line-height: 1;
}

h2 {
  font-size: var(--r3-text-2xl);
  line-height: 2.5rem;
}

h3 {
  font-size: var(--r3-text-xl);
  line-height: 2.25rem;
}

h4 {
  font-size: var(--r3-text-lg);
  line-height: 2rem;
}

h5 {
  font-size: var(--r3-text-md);
}

.r3-text-xs {
  font-size: var(--r3-text-xs);
  line-height: 1rem;
}

.r3-text-s {
  font-size: var(--r3-text-s);
  line-height: 1rem;
}

.r3-text-md {
  font-size: var(--r3-text-md);
  line-height: 1.5rem;
}

@media screen and (max-width: 48rem) {
  .r3-button_primary,
  .r3-button_secondary {
    font-size: var(--r3-text-base);
  }

  h1 {
    font-size: var(--r3-text-2xl);
  }
  h2 {
    font-size: var(--r3-text-xl);
  }
}