:root {
  --primary-color: #0E0E0E;
  --secondary-color: #A291C3;
  --tertiary-color: #d1c1ae;
  --quaternary-color: #abd189;

  --font-body: Helvetica, Arial, sans-serif;
  --font-heading: 'Anton', sans-serif;
  --font-letter-spacing: 0.1rem;

  /* Headings */
  --heading-1-size: 6rem;     /* 96px */
  --heading-2-size: 4rem;     /* 64px */
  --heading-3-size: 2.3rem;   /* 48px */
  --heading-4-size: 1.8rem; 

  /* Body text */
  --body-1-size: 2rem;        /* 32px */
  --body-2-size: 1.5rem;      /* 24px */
  --body-3-size: 1.25rem;     /* 20px */

  --gap: 14px;
  --margin: calc(var(--gap) * 4);
}

/* Half desktop */
@media (max-width: 1200px) {
  :root {
    --heading-1-size: 4.5rem;   /* ~72px */
    --heading-2-size: 3rem;     /* 48px */
    --heading-3-size: 1.8rem;   /* ~29px */
    --heading-4-size: 1.2rem;   /* ~19px */

    --body-1-size: 1.6rem;      /* ~26px */
    --body-2-size: 1.25rem;     /* ~20px */
    --body-3-size: 1rem;        /* 16px */

    --gap: 12px;
    --margin: calc(var(--gap) * 3);
  }
}

/* Tablet and large phones */
@media (max-width: 768px) {
  :root {
    --heading-1-size: 3rem;     /* 48px */
    --heading-2-size: 2.25rem;  /* 36px */
    --heading-3-size: 1.5rem;   /* 24px */
    --heading-4-size: 1rem;     /* 16px */

    --body-1-size: 1.25rem;     /* 20px */
    --body-2-size: 1rem;        /* 16px */
    --body-3-size: 0.875rem;    /* 14px */

    --gap: 10px;
    --margin: calc(var(--gap) * 2);
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  :root {
    --heading-1-size: 2rem;     /* 32px */
    --heading-2-size: 1.5rem;   /* 24px */
    --heading-3-size: 1.125rem; /* 18px */
    --heading-4-size: 0.875rem; /* 14px */

    --body-1-size: 1rem;        /* 16px */
    --body-2-size: 0.875rem;    /* 14px */
    --body-3-size: 0.75rem;     /* 12px */

    --gap: 8px;
    --margin: calc(var(--gap) * 1.5);
  }
}