:root {
  --font-family: 'Roboto', sans-serif;
  --font-size: 16px;

  --primary-color: #9b59b6;
  --secondary-color: #bdc3c7;
  --black-color: #000000;
  --white-color: #ffffff;

  --success-color: #2ecc71;
  --error-color: #e74c3c;
  --warning-color: #f1c40f;
  --info-color: #2980b9;

  --font-size-h1: 6rem;
  --font-weight-h1: 300;
  --letter-spacing-h1: -1.5px;

  --font-size-h2: 3.75rem;
  --font-weight-h2: 300;
  --letter-spacing-h2: -0.5px;

  --font-size-h3: 3rem;
  --font-weight-h3: 400;
  --letter-spacing-h3: 0px;

  --font-size-h4: 2.125rem;
  --font-weight-h4: 400;
  --letter-spacing-h4: 0.25px;

  --font-size-h5: 1.5rem;
  --font-weight-h5: 400;
  --letter-spacing-h5: 0px;

  --font-size-h6: 1.25rem;
  --font-weight-h6: 500;
  --letter-spacing-h6: 0.15px;

  --font-size-s1: 1rem;
  --font-weight-s1: 400;
  --letter-spacing-s1: 0.15px;

  --font-size-s2: 0.875rem;
  --font-weight-s2: 500;
  --letter-spacing-s1: 0.1px;

  --font-size-b1: 1rem;
  --font-weight-b1: 400;
  --letter-spacing-b1: 0.5px;

  --font-size-b2: 0.875rem;
  --font-weight-b2: 400;
  --letter-spacing-b2: 0.25px;

  --font-size-caption: 0.75rem;
  --font-weight-caption: 400;
  --letter-spacing-caption: 0.4px;

  --font-size-overline: 0.625rem;
  --font-weight-overline: 400;
  --letter-spacing-overline: 1.5px;

  --font-size-button: 0.875rem;
  --font-weight-button: 500;
  --letter-spacing-button: 1.25px;
  --text-transform-button: uppercase;
  --border-radius-button: 0.25rem;
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: var(--primary-color);
}