:root {
  /* Font Sizing - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

  --font-base: calc(16px + 0.25vw);

  --font-size-display: calc(var(--font-base) * 4.5); /* page-title */
  --font-size-huge: calc(var(--font-base) * 3); /* h1 */
  --font-size-largest: calc(
    var(--font-size-larger) * 1.1875
  ); /* h2 - 33.84px [^ 5.34px] */
  --font-size-larger: calc(
    var(--font-size-large) * 1.25
  ); /* h3 - 28.50px [^ 5.70px] */
  --font-size-large: calc(
    var(--font-base) * 1.125
  ); /* h4 - 22.80px [^ 2.53px] */

  --font-size-medium: calc(var(--font-base) * 1); /*  p ~ 20.27px */

  --font-size-small: calc(var(--font-base) * 1.125);

  --font-size-smaller: calc(var(--font-base) * 0.75);

  --font-size-bigtext: calc(var(--font-size-largest) * 1.75);

  /* Line Height - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

  --line-height-xs: 1.125;
  --line-height-sm: 1.25;
  --line-height-md: 1.5;
  --line-height-lg: 1.65;

  /* Font -Family - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

  --font-family-serif: "Recife Text", serif;
  --font-family-sans: "Messina Sans", sans-serif;
  --font-family-mono: "IBM Plex Mono", SF Mono, SFMono-Regular, ui-monospace,
    Menlo, Consolas, monospace;

  --size-text: 820px;
  --content-width: 800px;

  --color-foreground: white;
  --color-background: #12121a;
  --color-secondary: hsla(0, 100%, 100%, 0.5);
  --color-tertiary: hsla(0, 100%, 100%, 0.3);

  --sp-xxs: calc(var(--font-base) * 0.375);
  --sp-xs: calc(var(--font-base) * 0.5);
  --sp-md: calc(var(--font-size) * 1);
  --sp-sm: calc(var(--font-size) * 0.75);
  --sp-lg: calc(var(--font-size) * 1.5);
  --sp-xl: calc(var(--font-size) * 2);
  --sp-xxl: calc(var(--font-size) * 3);
  --sp-xxxl: calc(var(--font-size) * 5);
}