:root {
  --size-icon-normal: 2em;
  --size-icon-large: 4em;

  --size-spacing-small: 0.25rem;
  --size-spacing-medium: 0.5rem;
  --size-spacing-large: 1rem;
  --size-spacing-xlarge: 2rem;

  --size-type-body: 1rem;
  --size-type-medium: 1.25rem;
  --size-type-large: 1.5rem;
  --size-type-xlarge: 2rem;
  --size-type-xxlarge: 2.5rem;

  --color-primary: rgb(15, 15, 15);
  --color-highlight: rgb(220 0 0);
  --color-text: rgb(245, 245, 245);
  --color-accent: rgb(55 55 55);
  --color-background: rgba(255, 255, 255, 0.02);
  --color-highlight-background: rgba(55, 55, 55, 0.5);

  --font-family-display: "Racing Sans One", sans-serif;
  --font-family-body: "IBM Plex Mono", monospace;

  --font-line-height-body: 1.5;
  --font-line-height-compact: 1.25;
  --font-line-height-display: 1.125;
  --font-line-height-logotype: 1;

  --font-weight-normal: 400;
  --font-weight-light: 200;
  --font-weight-bold: 700;
}

body.dark-mode {
  --color-text: rgb(15, 15, 15);
  --color-accent: rgb(220 0 0);
  --color-primary: rgb(245, 245, 245);
  --color-highlight: rgb(55 55 55);
  --color-highlight-background: rgba(255, 255, 255, 0.3);
  --color-background: rgba(55, 55, 55, 0.5);
}