:root{
  --c-transparent:        rgba(255, 255, 255, 0);
  --c-white:              hsl(0, 0%, 100%);
  --c-black:              hsl(0, 0%, 6%);
  --c-old-red:            #ee2b31;
  --c-old-red-dark:       #b10402;
  --c-old-gray-light:     #dfdee6;
  --c-old-gray-lighter:   #f4f3f6;
  --c-old-blue:           #388ab0;
  --c-bg-site:            hsl(275, 2%, 99%);
  --c-text-primary:       hsl(275, 2%, 26%);
  --c-text-secondary:     hsl(275, 2%, 46%);
  --c-text-tertiary:      hsl(275, 2%, 66%);
  --c-text-quaternary:    hsl(275, 2%, 74%);
  --c-text-white:         hsl(0, 0%, 100%) var(--c-white);
  --c-text-black:         hsl(0, 0%, 6%) var(--c-black);
  --c-link:               hsl(217, 70%, 50%);
  --c-link-hover:         hsl(217, 70%, 66%);
}

@media (prefers-color-scheme: dark) {
  :root{
    --c-bg-site:          hsl(275, 2%, 26%);
    --c-text-primary:     hsl(275, 2%, 99%);
    --c-text-secondary:   hsl(275, 2%, 90%);
    --c-text-tertiary:    hsl(275, 2%, 74%);
    --c-link:             hsl(217, 70%, 78%);
    --c-link-hover:       hsl(217, 70%, 66%);
    --c-old-gray-light:   #22212c;
    --c-old-gray-lighter: #18161d;
  }
}

:root{
--rem: 20px;
--fs-scale-ratio-down: 1.112;
--fs-scale-ratio-up: 1.118;
--fs-xxxs: calc(var(--fs-xxs) / var(--fs-scale-ratio-down));
--fs-xxs: calc(var(--fs-xs) / var(--fs-scale-ratio-down));
--fs-xs: calc(var(--fs-s) / var(--fs-scale-ratio-down));
--fs-s: calc(var(--fs-sm) / var(--fs-scale-ratio-down));
--fs-sm: calc(var(--fs-m) / var(--fs-scale-ratio-down));
--fs-m: var(--rem);
--fs-md: calc(var(--fs-m) * var(--fs-scale-ratio-up));
--fs-l: calc(var(--fs-md) * var(--fs-scale-ratio-up));
--fs-xl: calc(var(--fs-l) * var(--fs-scale-ratio-up));
--fs-xxl: calc(var(--fs-xl) * var(--fs-scale-ratio-up));
--lh-1: 1;
--lh-xxxs: 1.03;
--lh-xxs: 1.09;
--lh-xs: 1.14;
--lh-s: 1.22;
--lh-sm: 1.3;
--lh-m: 1.4;
--lh-md: 1.46;
--lh-l: 1.51;
--lh-xl: 1.6;
--lh-xxl: 1.64;
--lh-xxxl: 1.7;
}