:root {
  /* Font Sizes */
  --font-heading-size: 14px;
  --font-paragraph-size: 12px;
  --font-label-size: 12px;

  /* Line Heights */
  --line-heading: 110%;
  --line-paragraph: 100%;
  --line-label: 100%;

  /* Letter Spacing */
  --letter-heading: -0.05em;
  --letter-paragraph: 0em;
  --letter-label: 0.05em;

  /* Font Weights */
  --weight-heading: 600;
  --weight-paragraph: 400;
  --weight-label: 400;
}

@media (min-width: 700px) {
  :root {
    --font-heading-size: 18px;
    --font-paragraph-size: 16px;
    --font-label-size: 14px;

    --line-heading: 120%;
    --line-paragraph: 135%;
    --line-label: 110%;

    --letter-heading: -3%;
    --letter-paragraph: -5%;
    --letter-label: 5%;

    --weight-heading: 600;
    --weight-paragraph: 400;
    --weight-label: 400;
  }
}

:root {
  /* Base Colors */
  --base-600: rgba(255, 255, 255, 1);
  --base-500: rgba(250, 250, 250, 1);
  --base-400: rgba(230, 230, 230, 1);
  --base-300: rgba(215, 215, 215, 1);
  --base-200: rgba(200, 200, 200, 1);
  --base-100: rgba(186, 186, 186, 1);

  /* Mid Colors */
  --mid-600: rgba(171, 171, 171, 1);
  --mid-500: rgba(141, 141, 141, 1);
  --mid-400: rgba(112, 112, 112, 1);
  --mid-300: rgba(82, 82, 82, 1);
  --mid-200: rgba(66, 66, 66, 1);
  --mid-100: rgba(49, 49, 49, 1);

  /* Contrast Colors */
  --contrast-500: rgba(33, 33, 33, 1);
  --contrast-400: rgba(25, 25, 25, 1);
  --contrast-300: rgba(16, 16, 16, 1);
  --contrast-200: rgba(8, 8, 8, 1);
  --contrast-100: rgba(0, 0, 0, 1);
}


.heading-text {
  font-size: var(--font-heading-size);
  line-height: var(--line-heading);
  letter-spacing: var(--letter-heading);
  font-weight: var(--weight-heading);
}

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

.label-text {
  font-size: var(--font-label-size);
  line-height: var(--line-label);
  letter-spacing: var(--letter-label);
  font-weight: var(--weight-label);
  color: white;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
}



p,h1,h2,h3 {
  margin: 0;
}

.logo-text {
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: -3%;
  text-transform: uppercase;
}

.main-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 14px;
  border-bottom: 2px solid black;
  background-color: rgba(230, 230, 230, 1);
}

.settings-button {
  border: none;
  background: none;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.dark-mode {
  background-color: rgb(27, 27, 27);
}

p.dark-mode,
strong.dark-mode,
small.dark-mode,
h1.dark-mode,
.content-heading.dark-mode {
  color: rgb(232, 232, 232);
}