:root {
  font-size: 62.5%;

  --ff-english: "Rubik", sans-serif;

  --border-color: hsla(210, 20%, 98%, 50%);
  --hr-color: hsla(210, 20%, 98%, 25%);

  --backdrop-bg: blur(5px);
  --card-shadow: 0 4px 4px hsla(224, 71%, 4%, 25%),
    inset 0 4px 4px hsla(224, 71%, 4%, 25%);

  --colors-card-bg: hsla(224, 71%, 4%, 60%);
  --colors-accent-light: #d14747;
  --colors-accent: #b91c1c;
  --colors-accent-dark: #991b1b;
  --colors-gray-50: #f9fafb;
  --colors-gray-200: #e5e7eb;
  --colors-gray-400: #9ca3af;
  --colors-gray-500: #6b7280;
  --colors-gray-600: #4b5563;
  --colors-gray-700: #374151;
  --colors-gray-950: #030712;

  --fs-cta: 1.6rem;
  --fs-xl: 2.4rem;
  --fs-lg: clamp(1.8rem, calc(1.1647rem + 1.765vw), 2.4rem);
  --fs-md: clamp(1.5rem, calc(1.1824rem + 0.882vw), 1.8rem);
  --fs-sm: 1.4rem;
  --fs-xs: 1.3rem;

  --border-radius: 8px;
  --card-border-radius: 12px;
  --drawer-border-radius: 16px;
}

.white-label {
  color: var(--colors-gray-950);
  background-color: var(--colors-gray-50);
}

.black-label {
  color: var(--colors-gray-50);
  background-color: var(--colors-gray-950);
}

/* Very Tiny Mobile */
@media screen and (max-height: 700px) {
  :root {
    --fs-cta: 1.4rem;
    --fs-lg: 2rem;
    --fs-md: 1.6rem;
    --fs-sm: 1.4rem;
    --fs-xs: 1.3rem;
  }
}

/* Desktop */
@media screen and (min-width: 1025px) {
  :root {
    --fs-cta: 1.6rem;
    --fs-lg: 2.4rem;
    --fs-md: 1.6rem;
    --fs-sm: 1.4rem;
    --fs-xs: 1.3rem;
  }
}