:root {
  /* primary colour */
  --primary-hue: 38;
  --primary-lightness-step: 20%;
  --primary-lighter: hsl(var(--primary-hue), 100%, calc(50% + (2 * var(--primary-lightness-step))));
  --primary-light: hsl(var(--primary-hue), 100%, calc(50% + (1 * var(--primary-lightness-step))));
  --primary: hsl(var(--primary-hue), 100%, 50%);
  --primary-dark: hsl(var(--primary-hue), 100%, calc(50% - (1 * var(--primary-lightness-step))));
  --primary-darker: hsl(var(--primary-hue), 100%, calc(50% - (2 * var(--primary-lightness-step))));

  /* secondary colour */
  --secondary-hue: 223;
  --secondary-lightness-step: 20%;
  --secondary-lighter: hsl(var(--secondary-hue), 100%, calc(50% + (2 * var(--secondary-lightness-step))));
  --secondary-light: hsl(var(--secondary-hue), 100%, calc(50% + (1 * var(--secondary-lightness-step))));
  --secondary: hsl(var(--secondary-hue), 100%, 50%);
  --secondary-dark: hsl(var(--secondary-hue), 100%, calc(50% - (1 * var(--secondary-lightness-step))));
  --secondary-darker: hsl(
    var(--secondary-hue),
    100%,
    calc(50% - (2 * var(--secondary-lightness-step)))
  );

  /* background colour */
  --background-hue: 0;
  --background-saturation: 0%;
  --background-lightness: 14%;
  --background-lightness-step: 5%;

  --background-lighter: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + (2 * var(--background-lightness-step)))
  );
  --background-light: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + (1 * var(--background-lightness-step)))
  );
  --background: hsl(
    var(--background-hue),
    var(--background-saturation),
    var(--background-lightness)
  );
  --background-dark: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) - (1 * var(--background-lightness-step)))
  );
  --background-darker: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) - (2 * var(--background-lightness-step)))
  );

  /* text colour */
  --text-light: white;
  --text-dark: black;
  --text-on-primary: var(--text-dark);
  --text-on-secondary: var(--text-light);
  --text-on-background: hsl(0, 0%, 70%);

  /* misc */
  --border-colour: hsl(0, 0%, 35%);
  --gutter: 1.3rem;
}

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: var(--background);
  color: var(--text-on-background);
}

body {
  padding: 0;
  margin: 0;
}

a {
  color: var(--text-on-background);
}