:root {
  --page-max-width: 1200px;
  --links-max-width: 480px;

  --space-xs: 0.25rem; /* 4px  */
  --space-sm: 0.5rem;  /* 8px  */
  --space-md: 1rem;    /* 16px */
  --space-lg: 1.5rem;  /* 24px */
  --space-xl: 2rem;    /* 32px */

  --font-family-base: "Lato", system-ui, sans-serif;
  --font-family-links: "VT323", monospace;

  --font-weight-normal: 400;
  --font-weight-bold: 700;

  --font-size-base: 16px;
  --font-scale-ratio: 1.25;
  --font-size-sm: calc(var(--font-size-base) / var(--font-scale-ratio));
  --font-size-lg: calc(var(--font-size-base) * var(--font-scale-ratio));
  --font-size-xl: calc(var(--font-size-lg) * var(--font-scale-ratio));
  --font-size-2xl: calc(var(--font-size-xl) * var(--font-scale-ratio));

  --transition-duration: 0.2s;
  --transition: var(--transition-duration) ease;

  --z-background-wrapper: -1;
  --z-page-wrapper: 1;
  --z-overlay-wrapper: 100;
  --z-notifications-wrapper: 200;

  --backdrop-blur-container: none;
  --border-container: none;
  --border-radius-container: 0;

  --color-text: #e3e3e3;
  --color-surface: #202020;
  --color-primary: #e3e3e3;
  --color-secondary: #e3e3e3;
  --color-background: #202020;
  --color-border: #e3e3e3;
}