/* Design tokens for hellocasino */
/* Auto-generated by Style Dictionary */
/* DO NOT EDIT THIS FILE DIRECTLY */

:root {
  --colors-primary: rgb(0, 170, 201);
  --colors-secondary: rgb(34, 34, 34);
  --colors-secondary-dark: rgb(0, 0, 0);
  --colors-secondary-light: rgb(56, 56, 56);
  --colors-tertiary: rgb(232, 141, 17);
  --colors-main-text: rgb(211, 211, 211);
  --colors-neutral-light: rgb(255, 255, 255);
  --colors-neutral-dark: rgb(144, 144, 144);
  --colors-neutral: rgb(237, 237, 237);
  --colors-danger: rgb(253, 78, 78);
  --text-styles-h2-web-font-family: Roboto;
  --text-styles-h2-web-font-size: 28px;
  --text-styles-h2-web-font-weight: 700;
  --text-styles-h2-web-line-height: 32px;
  --text-styles-h2-web-color: rgb(33, 33, 33);
  --text-styles-h3-web-font-family: Roboto;
  --text-styles-h3-web-font-size: 24px;
  --text-styles-h3-web-font-weight: 700;
  --text-styles-h3-web-line-height: 28px;
  --text-styles-h3-web-color: rgb(33, 33, 33);
  --text-styles-h4-web-font-family: Roboto;
  --text-styles-h4-web-font-size: 22px;
  --text-styles-h4-web-font-weight: 700;
  --text-styles-h4-web-line-height: 26px;
  --text-styles-h4-web-color: rgb(33, 33, 33);
  --text-styles-h2-mob-font-family: Roboto;
  --text-styles-h2-mob-font-size: 22px;
  --text-styles-h2-mob-font-weight: 700;
  --text-styles-h2-mob-line-height: 25px;
  --text-styles-h2-mob-color: rgb(33, 33, 33);
  --text-styles-h3-mob-font-family: Roboto;
  --text-styles-h3-mob-font-size: 20px;
  --text-styles-h3-mob-font-weight: 700;
  --text-styles-h3-mob-line-height: 23px;
  --text-styles-h3-mob-color: rgb(33, 33, 33);
  --text-styles-h4-mob-font-family: Roboto;
  --text-styles-h4-mob-font-size: 18px;
  --text-styles-h4-mob-font-weight: 700;
  --text-styles-h4-mob-line-height: 21px;
  --text-styles-h4-mob-color: rgb(33, 33, 33);
  --text-styles-input-labels-font-family: Roboto;
  --text-styles-input-labels-font-size: 16px;
  --text-styles-input-labels-font-weight: 700;
  --text-styles-input-labels-line-height: 22px;
  --text-styles-input-labels-color: rgb(33, 33, 33);
  --text-styles-links-font-family: Roboto;
  --text-styles-links-font-size: 16px;
  --text-styles-links-font-weight: 500;
  --text-styles-links-line-height: 22px;
  --text-styles-links-color: rgb(0, 170, 200);
  --text-styles-modal-title-web-font-family: Roboto;
  --text-styles-modal-title-web-font-size: 25px;
  --text-styles-modal-title-web-font-weight: 700;
  --text-styles-modal-title-web-line-height: 30px;
  --text-styles-modal-title-web-color: rgb(255, 255, 255);
  --text-styles-modal-title-mob-font-family: Roboto;
  --text-styles-modal-title-mob-font-size: 21px;
  --text-styles-modal-title-mob-font-weight: 700;
  --text-styles-modal-title-mob-line-height: 26px;
  --text-styles-modal-title-mob-color: rgb(255, 255, 255);
  --text-styles-button-web-font-family: Roboto;
  --text-styles-button-web-font-size: 20px;
  --text-styles-button-web-font-weight: 700;
  --text-styles-button-web-line-height: 30px;
  --text-styles-button-web-color: rgb(255, 255, 255);
  --text-styles-button-sm-web-font-family: Roboto;
  --text-styles-button-sm-web-font-size: 18px;
  --text-styles-button-sm-web-font-weight: 700;
  --text-styles-button-sm-web-line-height: 27px;
  --text-styles-button-sm-web-color: rgb(255, 255, 255);
  --text-styles-button-mob-font-family: Roboto;
  --text-styles-button-mob-font-size: 18.5px;
  --text-styles-button-mob-font-weight: 700;
  --text-styles-button-mob-line-height: 28px;
  --text-styles-button-mob-color: rgb(255, 255, 255);
  --text-styles-button-sm-mob-font-family: Roboto;
  --text-styles-button-sm-mob-font-size: 16px;
  --text-styles-button-sm-mob-font-weight: 700;
  --text-styles-button-sm-mob-line-height: 28px;
  --text-styles-button-sm-mob-color: rgb(255, 255, 255);
  --text-styles-alert-font-family: Roboto;
  --text-styles-alert-font-size: 16px;
  --text-styles-alert-font-weight: 500;
  --text-styles-alert-line-height: 22px;
  --text-styles-alert-color: rgb(253, 78, 78);
  --spacing-spacing-xxs: 4px;
}

/* Utility classes for text styles */
.text-styles-h2-web {
  font-family: var(--text-styles-h2-web-font-family) !important;
  font-size: var(--text-styles-h2-web-font-size) !important;
  font-weight: var(--text-styles-h2-web-font-weight) !important;
  line-height: var(--text-styles-h2-web-line-height) !important;
  color: var(--text-styles-h2-web-color) !important;
}

.text-styles-h3-web {
  font-family: var(--text-styles-h3-web-font-family) !important;
  font-size: var(--text-styles-h3-web-font-size) !important;
  font-weight: var(--text-styles-h3-web-font-weight) !important;
  line-height: var(--text-styles-h3-web-line-height) !important;
  color: var(--text-styles-h3-web-color) !important;
}

.text-styles-h4-web {
  font-family: var(--text-styles-h4-web-font-family) !important;
  font-size: var(--text-styles-h4-web-font-size) !important;
  font-weight: var(--text-styles-h4-web-font-weight) !important;
  line-height: var(--text-styles-h4-web-line-height) !important;
  color: var(--text-styles-h4-web-color) !important;
}

.text-styles-h2-mob {
  font-family: var(--text-styles-h2-mob-font-family) !important;
  font-size: var(--text-styles-h2-mob-font-size) !important;
  font-weight: var(--text-styles-h2-mob-font-weight) !important;
  line-height: var(--text-styles-h2-mob-line-height) !important;
  color: var(--text-styles-h2-mob-color) !important;
}

.text-styles-h3-mob {
  font-family: var(--text-styles-h3-mob-font-family) !important;
  font-size: var(--text-styles-h3-mob-font-size) !important;
  font-weight: var(--text-styles-h3-mob-font-weight) !important;
  line-height: var(--text-styles-h3-mob-line-height) !important;
  color: var(--text-styles-h3-mob-color) !important;
}

.text-styles-h4-mob {
  font-family: var(--text-styles-h4-mob-font-family) !important;
  font-size: var(--text-styles-h4-mob-font-size) !important;
  font-weight: var(--text-styles-h4-mob-font-weight) !important;
  line-height: var(--text-styles-h4-mob-line-height) !important;
  color: var(--text-styles-h4-mob-color) !important;
}

.text-styles-input-labels {
  font-family: var(--text-styles-input-labels-font-family) !important;
  font-size: var(--text-styles-input-labels-font-size) !important;
  font-weight: var(--text-styles-input-labels-font-weight) !important;
  line-height: var(--text-styles-input-labels-line-height) !important;
  color: var(--text-styles-input-labels-color) !important;
}

.text-styles-links {
  font-family: var(--text-styles-links-font-family) !important;
  font-size: var(--text-styles-links-font-size) !important;
  font-weight: var(--text-styles-links-font-weight) !important;
  line-height: var(--text-styles-links-line-height) !important;
  color: var(--text-styles-links-color) !important;
}

.text-styles-modal-title-web {
  font-family: var(--text-styles-modal-title-web-font-family) !important;
  font-size: var(--text-styles-modal-title-web-font-size) !important;
  font-weight: var(--text-styles-modal-title-web-font-weight) !important;
  line-height: var(--text-styles-modal-title-web-line-height) !important;
  color: var(--text-styles-modal-title-web-color) !important;
}

.text-styles-modal-title-mob {
  font-family: var(--text-styles-modal-title-mob-font-family) !important;
  font-size: var(--text-styles-modal-title-mob-font-size) !important;
  font-weight: var(--text-styles-modal-title-mob-font-weight) !important;
  line-height: var(--text-styles-modal-title-mob-line-height) !important;
  color: var(--text-styles-modal-title-mob-color) !important;
}

.text-styles-button-web {
  font-family: var(--text-styles-button-web-font-family) !important;
  font-size: var(--text-styles-button-web-font-size) !important;
  font-weight: var(--text-styles-button-web-font-weight) !important;
  line-height: var(--text-styles-button-web-line-height) !important;
  color: var(--text-styles-button-web-color) !important;
}

.text-styles-button-sm-web {
  font-family: var(--text-styles-button-sm-web-font-family) !important;
  font-size: var(--text-styles-button-sm-web-font-size) !important;
  font-weight: var(--text-styles-button-sm-web-font-weight) !important;
  line-height: var(--text-styles-button-sm-web-line-height) !important;
  color: var(--text-styles-button-sm-web-color) !important;
}

.text-styles-button-mob {
  font-family: var(--text-styles-button-mob-font-family) !important;
  font-size: var(--text-styles-button-mob-font-size) !important;
  font-weight: var(--text-styles-button-mob-font-weight) !important;
  line-height: var(--text-styles-button-mob-line-height) !important;
  color: var(--text-styles-button-mob-color) !important;
}

.text-styles-button-sm-mob {
  font-family: var(--text-styles-button-sm-mob-font-family) !important;
  font-size: var(--text-styles-button-sm-mob-font-size) !important;
  font-weight: var(--text-styles-button-sm-mob-font-weight) !important;
  line-height: var(--text-styles-button-sm-mob-line-height) !important;
  color: var(--text-styles-button-sm-mob-color) !important;
}

.text-styles-alert {
  font-family: var(--text-styles-alert-font-family) !important;
  font-size: var(--text-styles-alert-font-size) !important;
  font-weight: var(--text-styles-alert-font-weight) !important;
  line-height: var(--text-styles-alert-line-height) !important;
  color: var(--text-styles-alert-color) !important;
}