:root {
  // Colours
  --light: rgb(255 255 255);
  --dark: rgb(0 0 0);

  --foreground: var(--dark);
  --background: var(--light);

  --primary: rgb(127 127 127);
  --secondary: rgb(200 200 200);
  --neutral: rgb(80 80 80);

  --info: rgb(0 0 255);
  --warning: rgb(255 255 0);
  --error: rgb(255 0 0);
  --success: rgb(0 255 0);

  // Spacing
  --gutter: var(--xl);
  --max-width: 1600px;

  // Borders
  --border-width: 5px;
  --border-colour: var(--foreground);
  --border-radius: 1px;
  --border: solid var(--border-colour) var(--border-width);

  // Animation
  --transition-fast: 0.15s;
  --transition-medium: 0.3s;

  // Forms
  --form-control-padding: var(--xs) var(--sm);
  --form-control-background: var(--secondary);
}