:root {
  --font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --line-height-headers: 1.1;
  --line-height-body: 1.5;

  --font-size-xxxs: 4px;
  --font-size-xs: 10px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-xxxl: 24px;
  --font-size-xxxxl: 32px;

  --color-text-header: hsl(0, 1%, 16%);
  --color-text-body: hsl(0, 5%, 15%);
  --color-text-muted: hsl(0, 1%, 44%);

  --space-xxxs: 4px;
  --space-xxs: 6px;
  --space-xs: 8px;
  --space-s: 10px;
  --space-m: 14px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;

  --color-primary: hsl(350, 67%, 50%);
  --color-primary-rotate: hsl(10, 73%, 54%);
  --color-primary-bg: hsl(0, 85%, 96%);
  --color-secondary: hsl(101, 45%, 56%);
  --color-secondary-rotate: hsl(120, 45%, 56%);
  --color-tertiary: hsl(49, 89%, 64%);
  --color-glint: hsl(210, 100%, 82%);
  --color-link: hsl(230, 54%, 53%);

  --color-white: hsl(0, 0%, 100%);
  --color-background: hsl(30, 50%, 98%);
  --color-background-muted: hsl(0, 0%, 68%);
  --color-light: hsl(0, 6%, 93%);
  --color-grey: hsl(0, 0%, 65%);
  --color-dark: var(--color-text-header);
  --color-caution: hsl(350, 67%, 50%);
  --color-light-green: hsl(101, 100%, 98%);
  --color-light-red: hsl(16, 85%, 95%);
  --color-positive: hsl(245, 100%, 50%);
  --color-negative: hsl(0, 100%, 50%);

  --border-radius: 12px;

  --border: solid 1px var(--color-light);
  --border-grey: solid 1px var(--color-grey);

  --shadow-large: 2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small: 1px 3px 6px hsl(0 0% 0% / 0.1);
}