body {
  /* BUTTON – shared */
  --btn-font-family: Inter;
  --btn-font-size: 14px;
  --btn-letter-spacing: 0px;
  --btn-radius: 4px;
  --btn-pt: 8px;
  --btn-pb: 8px;
  --btn-pl: 16px;
  --btn-pr: 16px;

  /* PRIMARY BUTTON */
  --btn-primary-bg: transparent;
  --btn-primary-color: #000;

  /* SECONDARY BUTTON */
  --btn-secondary-bg: transparent;
  --btn-secondary-color: #000;

  /* TABS */
  --tabs-font-family: Inter;
  --tabs-font-size: 14px;
  --tabs-letter-spacing: 0px;
  --tabs-radius: 4px;
  --tabs-bg: #eee;
  --tabs-color: #000;
  --tabs-active-bg: #000;
  --tabs-active-color: #fff;

  /* ANCHOR */
  --anchor-font-size: 14px;
  --anchor-letter-spacing: 0px;
  --anchor-color: #000;
  --anchor-icon-color: #000;
  --anchor-show-icon: block;

  /* TONE */
  --tone-font-family: Inter;
  --tone-radius: 8px;
  --tone-bg: #f5f5f5;

  --tone-label-font-size: 14px;
  --tone-label-letter-spacing: 0px;
  --tone-label-icon-color: #000;

  --tone-correct-color: green;
  --tone-incorrect-color: red;

  --tone-correct-icon-color: #067647;
  --tone-incorrect-icon-color: #b42318;

  --dodont-icon-style: fill;

  --do-color: #00ba98;
  --dont-color: #c70000;

  --dodont-stroke-width: 0;

  /* SWITCH */
  --switch-track-normal: #ccc;
  --switch-track-active: #6e0bff;
  --switch-handle-normal: #fff;
  --switch-handle-active: #fff;
}

.button-primary,
.button-secondary {
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  letter-spacing: var(--btn-letter-spacing);
  border-radius: var(--btn-radius);
  padding: var(--btn-pt) var(--btn-pr) var(--btn-pb) var(--btn-pl);
}

/* Primary */
.button-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-color);
}

/* Secondary */
.button-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
}

/* States */
.btn-filled {
  border: none;
}

.tab {
  font-family: var(--tabs-font-family);
  font-size: var(--tabs-font-size);
  letter-spacing: var(--tabs-letter-spacing);
  border-radius: var(--tabs-radius);
  background-color: var(--tabs-bg);
  color: var(--tabs-color);
}

.tab.active {
  background-color: var(--tabs-active-bg);
  color: var(--tabs-active-color);
}

.anchor-share-text {
  font-size: var(--anchor-font-size);
  letter-spacing: var(--anchor-letter-spacing);
  color: var(--anchor-color);
}

.anchor-share svg {
  display: var(--anchor-show-icon);
}

.anchor-share svg path {
  stroke: var(--anchor-icon-color);
}

.tone-card {
  border-radius: var(--tone-radius);
  background-color: var(--tone-bg);
}

/* Label */
.tone-card .tone-card-top {
  font-size: var(--tone-label-font-size);
  letter-spacing: var(--tone-label-letter-spacing);
}

/* 
 .tone-card .tone-card-top svg path {
  stroke: var(--tone-label-icon-color);
} */

/* Correct / Incorrect */
.tone-label-correct,
.tone-label-incorrect {
  font-family: var(--tone-font-family);
}

.tone-label-correct {
  color: var(--tone-correct-color);
}

.tone-label-incorrect {
  color: var(--tone-incorrect-color);
}

.icon-tone-samples-circle-correct {
  fill: var(--tone-correct-icon-color);
}

.icon-tone-samples-circle-incorrect {
  fill: var(--tone-incorrect-icon-color);
}

.do-circle {
  fill: var(--do-color);
  stroke-width: var(--dodont-stroke-width);
}

/* DON'T icon */
.dont-circle {
  fill: var(--dont-color);
  stroke-width: var(--dodont-stroke-width);
}

/* Switch styles */
.slider::before {
  background-color: var(--switch-track-normal);
}

/* Checked track */
input:checked + .slider::before {
  background-color: var(--switch-track-active);
}

/* Handle */
.slider {
  background-color: var(--switch-handle-normal);
}

/* Checked handle */
input:checked + .slider {
  background-color: var(--switch-handle-active);
}

/* Typography styles */

.header-extra-large {
  font-family: var(--typo-headerExtraLarge-font, system-ui, sans-serif);
  font-size: var(--typo-headerExtraLarge-size);
  line-height: var(--typo-headerExtraLarge-line-height);
  letter-spacing: var(--typo-headerExtraLarge-letter-spacing);
  text-transform: var(--typo-headerExtraLarge-transform);
}

.header-large {
  font-family: var(--typo-headerLarge-font, system-ui, sans-serif);
  font-size: var(--typo-headerLarge-size);
  line-height: var(--typo-headerLarge-line-height);
  letter-spacing: var(--typo-headerLarge-letter-spacing);
  text-transform: var(--typo-headerLarge-transform);
}

.header {
  font-family: var(--typo-header-font, system-ui, sans-serif);
  font-size: var(--typo-header-size);
  line-height: var(--typo-header-line-height);
  letter-spacing: var(--typo-header-letter-spacing);
  text-transform: var(--typo-header-transform);
}

.eyebrow {
  font-family: var(--typo-eyebrow-font, system-ui, sans-serif);
  font-size: var(--typo-eyebrow-size);
  line-height: var(--typo-eyebrow-line-height);
  letter-spacing: var(--typo-eyebrow-letter-spacing);
  text-transform: var(--typo-eyebrow-transform);
}

.paragraph {
  font-family: var(--typo-paragraph-font, system-ui, sans-serif);
  font-size: var(--typo-paragraph-size);
  line-height: var(--typo-paragraph-line-height);
  letter-spacing: var(--typo-paragraph-letter-spacing);
  text-transform: var(--typo-paragraph-transform);
}

.caption {
  font-family: var(--typo-caption-font, system-ui, sans-serif);
  font-size: var(--typo-caption-size);
  line-height: var(--typo-caption-line-height);
  letter-spacing: var(--typo-caption-letter-spacing);
  text-transform: var(--typo-caption-transform);
}

.label {
  font-family: var(--typo-label-font, system-ui, sans-serif);
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-line-height);
  letter-spacing: var(--typo-label-letter-spacing);
  text-transform: var(--typo-label-transform);
}

.subtitle {
  font-family: var(--typo-subtitle-font, system-ui, sans-serif);
  font-size: var(--typo-subtitle-size);
  line-height: var(--typo-subtitle-line-height);
  letter-spacing: var(--typo-subtitle-letter-spacing);
  text-transform: var(--typo-subtitle-transform);
}

.title {
  font-family: var(--typo-title-font, system-ui, sans-serif);
  font-size: var(--typo-title-size);
  line-height: var(--typo-title-line-height);
  letter-spacing: var(--typo-title-letter-spacing);
  text-transform: var(--typo-title-transform);
}

@container (max-width: 1024px) {
  .header-extra-large {
    font-size: var(--typo-headerExtraLarge-size-tablet);
    line-height: var(--typo-headerExtraLarge-line-height-tablet);
    letter-spacing: var(--typo-headerExtraLarge-letter-spacing-tablet);
  }

  .header-large {
    font-size: var(--typo-headerLarge-size-tablet);
    line-height: var(--typo-headerLarge-line-height-tablet);
    letter-spacing: var(--typo-headerLarge-letter-spacing-tablet);
  }

  .header {
    font-size: var(--typo-header-size-tablet);
    line-height: var(--typo-header-line-height-tablet);
    letter-spacing: var(--typo-header-letter-spacing-tablet);
  }

  .eyebrow {
    font-size: var(--typo-eyebrow-size-tablet);
    line-height: var(--typo-eyebrow-line-height-tablet);
    letter-spacing: var(--typo-eyebrow-letter-spacing-tablet);
  }

  .paragraph {
    font-size: var(--typo-paragraph-size-tablet);
    line-height: var(--typo-paragraph-line-height-tablet);
    letter-spacing: var(--typo-paragraph-letter-spacing-tablet);
  }

  .caption {
    font-size: var(--typo-caption-size-tablet);
    line-height: var(--typo-caption-line-height-tablet);
    letter-spacing: var(--typo-caption-letter-spacing-tablet);
  }

  .label {
    font-size: var(--typo-label-size-tablet);
    line-height: var(--typo-label-line-height-tablet);
    letter-spacing: var(--typo-label-letter-spacing-tablet);
  }

  .subtitle {
    font-size: var(--typo-subtitle-size-tablet);
    line-height: var(--typo-subtitle-line-height-tablet);
    letter-spacing: var(--typo-subtitle-letter-spacing-tablet);
  }

  .title {
    font-size: var(--typo-title-size-tablet);
    line-height: var(--typo-title-line-height-tablet);
    letter-spacing: var(--typo-title-letter-spacing-tablet);
  }
}

@container (max-width: 768px) {
  .header-extra-large {
    font-size: var(--typo-headerExtraLarge-size-mobile);
    line-height: var(--typo-headerExtraLarge-line-height-mobile);
    letter-spacing: var(--typo-headerExtraLarge-letter-spacing-mobile);
  }

  .header-large {
    font-size: var(--typo-headerLarge-size-mobile);
    line-height: var(--typo-headerLarge-line-height-mobile);
    letter-spacing: var(--typo-headerLarge-letter-spacing-mobile);
  }

  .header {
    font-size: var(--typo-header-size-mobile);
    line-height: var(--typo-header-line-height-mobile);
    letter-spacing: var(--typo-header-letter-spacing-mobile);
  }

  .eyebrow {
    font-size: var(--typo-eyebrow-size-mobile);
    line-height: var(--typo-eyebrow-line-height-mobile);
    letter-spacing: var(--typo-eyebrow-letter-spacing-mobile);
  }

  .paragraph {
    font-size: var(--typo-paragraph-size-mobile);
    line-height: var(--typo-paragraph-line-height-mobile);
    letter-spacing: var(--typo-paragraph-letter-spacing-mobile);
  }

  .caption {
    font-size: var(--typo-caption-size-mobile);
    line-height: var(--typo-caption-line-height-mobile);
    letter-spacing: var(--typo-caption-letter-spacing-mobile);
  }

  .label {
    font-size: var(--typo-label-size-mobile);
    line-height: var(--typo-label-line-height-mobile);
    letter-spacing: var(--typo-label-letter-spacing-mobile);
  }

  .subtitle {
    font-size: var(--typo-subtitle-size-mobile);
    line-height: var(--typo-subtitle-line-height-mobile);
    letter-spacing: var(--typo-subtitle-letter-spacing-mobile);
  }

  .title {
    font-size: var(--typo-title-size-mobile);
    line-height: var(--typo-title-line-height-mobile);
    letter-spacing: var(--typo-title-letter-spacing-mobile);
  }
}