:root {
  /* Color */
  --color-primary: #38b6ff;
  --color-primary-strong: #0077b6;
  --color-primary-dark: #005a8a;
  --color-ink: #101820;
  --color-text: #222222;
  --color-muted: #5f6870;
  --color-surface: #ffffff;
  --color-surface-muted: #d9d9d9;
  --color-border: #d5dadd;
  --color-focus: #005a8a;

  /* Fonts */
  --font-menu: 'Inter', sans-serif;
  --font-heading: 'Roboto Condensed', sans-serif;
  --font-content: 'Roboto', sans-serif;
  --font-button: 'Inter', sans-serif;

  /* Menu */
  --font-size-menu: 16px;
  --font-weight-menu: 700;

  /* Headings */
  --font-size-heading: 30px;
  --font-weight-heading: 700;

  /* Content */
  --font-size-content: 18px;
  --font-weight-content: 400;

  /* Buttons */
  --font-size-button: 16px;
  --font-weight-button: 700;

  /* Layout */
  --container-width: 1200px;
  --container-gutter: 20px;
  --section-space: 64px;

  /* Motion */
  --transition-fast: 180ms ease;
}