*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-bg-dark: #111111;
  --color-bg-beige: #e9e7e2;
  --color-bg-grey: #dcdcdc;
  --color-text: #111111;
  --color-text-light: #eaeaea;
  --color-text-muted: rgba(0, 0, 0, 0.45);
  --color-accent-pink: #e91e82;
  --color-retro-green: #00ff00;
  --color-border: #111111;

  /* Typography */
  --font-body: 'Director', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Terminal Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: monospace;
  --font-retro: 'Press Start 2P', monospace;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 5rem;

  /* Max-widths */
  --max-content: 760px;
  --max-wide: 1200px;
}