:root {
  --font-family-sans:    'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
  --line-height-headers:    1.1;
  --line-height-body:       1.5;
  --font-size-xs:           0.75rem;
  --font-size-s:            0.875rem;
  --font-size-m:            1rem;
  --font-size-l:            1.125rem;
  --font-size-xl:           1.25rem;
  --font-size-xxl:          1.5rem;
  --font-size-xxxl:         2rem;
  --font-size-xxxxl:        2.5rem;

  --space-xxxs:             0.25rem;
  --space-xxs:              0.375rem;
  --space-xs:               0.5rem;
  --space-s:                0.75rem;
  --space-m:                1rem;
  --space-l:                1.5rem;
  --space-xl:               2rem;
  --space-xxl:              2.5rem;
  --space-xxxl:             3rem;
  --space-xxxxl:            4rem;

  --border-radius:          0.375rem;
  --border-radius-l:        0.75rem;
  --border-radius-xl:       1.5rem;
  --border:                 solid 2px hsl(0, 6%, 93%);
  --shadow:                 1px 3px 6px hsl(0 0% 0% / 0.1);
  --shadow-xl:              0px 2px 10px hsl(0 0% 0% / 0.1);

  --color-background:           hsl(0, 0%, 100%);
  --color-text-header:          hsl(0, 1%, 16%);
  --color-text-body:            hsl(0, 5%, 25%);
  --color-text-inverted:        hsl(0, 0%, 100%);
  --color-text:                 var(--color-text-body);
  --color-primary:              hsl(350, 67%, 50%);
  --color-secondary:            hsl(101, 45%, 56%);
  --color-tertiary:             hsl(49, 89%, 64%);
  --color-primary-rotate:       hsl(10, 73%, 54%);
  --color-secondary-rotate:     hsl(120, 45%, 56%);
  --color-subtle:               hsl(0, 0%, 70%);
  --color-subtle-rotate:        hsl(0, 0%, 90%);
  --color-mono-bold:            hsl(0, 0%, 0%);
  --color-mono-bold-half-trans: hsl(0  0%  0 / 0.5);
  --color-mono-bold-trans:      hsl(0  0%  0 / 0.1);
  --color-success:              hsl(120, 80%, 27%);
  --color-success-bg:           hsl(120, 80%, 90%);
  --color-error:                hsl(0, 100%, 40%);
  --color-error-bg:             hsl(0, 100%, 95%);

  --page-width: min(100%, 100ch);
  --page-padding-inline: var(--space-s);
  --page-margin-inline: auto;
  --header-height: 3rem;
  --header-margin-block-start: 0rem;
  --header-margin-block-end: var(--space-l);
  --header-height-with-margins: calc(
    var(--header-height) +
    var(--header-margin-block-start) +
    var(--header-margin-block-end)
  );

  --navigation-z: 1000;
  --modal-z: 2000;
  --content-z: 100;
}