:root {
  /* Colors */
  --color-primary: blue;
  --color-secondary: lightgreen;
  --color-dark: black;
  --color-light: white;

  /* Fonts */
  --font-family-display: system-ui, sans-serif;
  --font-family-ui: system-ui, sans-serif;
  --font-family-code:
    ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  --font-scale: 1.2;
  --font-weight-bold: 600;

  @media (width < 1200px) {
    --font-scale: 1.15;
  }
  @media (width < 800px) {
    --font-scale: 1.1;
  }

  --font-0-size: 0.875rem;
  --font-0-spacing: 0;

  --font-1-size: 1rem;
  --font-1-spacing: -0.01em;

  --font-2-size: calc(var(--font-1-size) * var(--font-scale));
  --font-2-spacing: -0.015em;

  --font-3-size: calc(var(--font-2-size) * var(--font-scale));
  --font-3-spacing: -0.02em;

  --font-4-size: calc(var(--font-3-size) * var(--font-scale));
  --font-4-spacing: -0.025em;

  --font-5-size: calc(var(--font-4-size) * var(--font-scale));
  --font-5-spacing: -0.03em;

  --font-6-size: calc(var(--font-5-size) * var(--font-scale));
  --font-6-spacing: -0.035em;

  --font-7-size: calc(var(--font-6-size) * var(--font-scale));
  --font-7-spacing: -0.035em;

  --font-8-size: calc(var(--font-7-size) * var(--font-scale));
  --font-8-spacing: -0.035em;

  --font-9-size: calc(var(--font-8-size) * var(--font-scale));
  --font-9-spacing: -0.035em;

  --font-10-size: calc(var(--font-9-size) * var(--font-scale));
  --font-10-spacing: -0.035em;

  /* 3 types of line height */
  --line-height-text: 1.6;
  --line-height-medium: 1.3;
  --line-height-title: 1;

  /* Borders */
  --border-radius-button: 28px;
  --border-weight: 1px;
}