:root {
  /* Colour Theme */

  --primary: #b5a1e5;
  --on-primary: #100e17;
  --background: #131214;
  --on-background: #eae6f2;
  --surface: #1d1c1f;
  --on-surface: #dddae5;
  --on-surface-variant: #7b7980;
  --on-surface-variant-2: #b9b6bf;
  --outline: #3e3d40;
  --bg-aqi-1: #89e589;
  --on-bg-aqi-1: #1f331f;
  --bg-aqi-2: #e5dd89;
  --on-bg-aqi-2: #33311f;
  --bg-aqi-3: #e5c089;
  --on-bg-aqi-3: #332b1f;
  --bg-aqi-4: #e58989;
  --on-bg-aqi-4: #331f1f;
  --bg-aqi-5: #e589b7;
  --on-bg-aqi-5: #331f29;
  --white: hsl(0, 0%, 100%);
  --white-alpha-4: hsla(0, 0%, 100%, 0.04);
  --white-alpha-8: hsla(0, 0%, 100%, 0.08);
  --black-alpha-10: hsla(0, 0%, 0%, 0.1);

  /* Gradients */

  --gradient-1: linear-gradient(
    180deg,
    hsla(270, 5%, 7%, 0) 0%,
    hsla(270, 5%, 7%, 0.8) 65%,
    hsl(270, 5%, 7%) 100%
  );
  --gradient-2: linear-gradient(
    180deg,
    hsla(260, 5%, 12%, 0) 0%,
    hsla(260, 5%, 12%, 0.8) 65%,
    hsl(260, 5%, 12%) 100%
  );

  /* Typo */

  --ff-nunito-sans: "Nunito Sans", sans-serif;

  --heading: 5.6rem;
  --title-1: 2rem;
  --title-2: 1.8rem;
  --title-3: 1.6rem;
  --body-1: 2.2rem;
  --body-2: 2rem;
  --body-3: 1.6rem;
  --label-1: 1.4rem;
  --label-2: 1.2rem;

  --weight-regular: 400;
  --weight-semiBold: 600;

  /* Misc */

  --shadow-1: 0px 1px 3px hsla(0, 0%, 0%, 0.5);
  --shadow-2: 0px 3px 6px hsla(0, 0%, 0%, 0.4);
  --radius-28: 28px;
  --radius-16: 16px;
  --radius-pill: 500px;
  --radius-circle: 50%;
  --transition-short: 100ms ease;
}