: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;

  --space-gap:              var(--space-s);

  --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-background-trans-80:  hsl(0 0% 100% / 0.8);
  --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(291 62% 33%);
  --color-secondary:            hsl(77 96% 33%);
  --color-tertiary:             hsl(49, 89%, 64%);
  --color-subtle:               hsl(0, 0%, 70%);
  --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-alpha-0: hsl(120 80% 27% / 0.0);
  --color-success-alpha-20: hsl(120 80% 27% / 0.2);
  --color-success-alpha-40: hsl(120 80% 27% / 0.4);
  --color-success-alpha-60: hsl(120 80% 27% / 0.6);
  --color-success-alpha-80: hsl(120 80% 27% / 0.8);
  --color-success-alpha-100: hsl(120 80% 27% / 1.0);
  --color-success: hsl(120 80% 27%);
  --color-success-bg-alpha-0: hsl(120 80% 90% / 0.0);
  --color-success-bg-alpha-20: hsl(120 80% 90% / 0.2);
  --color-success-bg-alpha-40: hsl(120 80% 90% / 0.4);
  --color-success-bg-alpha-60: hsl(120 80% 90% / 0.6);
  --color-success-bg-alpha-80: hsl(120 80% 90% / 0.8);
  --color-success-bg-alpha-100: hsl(120 80% 90% / 1.0);
  --color-success-bg: hsl(120 80% 90%);
  --color-error-alpha-0: hsl(0 100% 40% / 0.0);
  --color-error-alpha-20: hsl(0 100% 40% / 0.2);
  --color-error-alpha-40: hsl(0 100% 40% / 0.4);
  --color-error-alpha-60: hsl(0 100% 40% / 0.6);
  --color-error-alpha-80: hsl(0 100% 40% / 0.8);
  --color-error-alpha-100: hsl(0 100% 40% / 1.0);
  --color-error: hsl(0 100% 40%);
  --color-error-bg-alpha-0: hsl(0 100% 95% / 0.0);
  --color-error-bg-alpha-20: hsl(0 100% 95% / 0.2);
  --color-error-bg-alpha-40: hsl(0 100% 95% / 0.4);
  --color-error-bg-alpha-60: hsl(0 100% 95% / 0.6);
  --color-error-bg-alpha-80: hsl(0 100% 95% / 0.8);
  --color-error-bg-alpha-100: hsl(0 100% 95% / 1.0);
  --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;
  --flashes-z: 3000;
}