/* Colour Variable Definitions */
:root {
  --main-colour: rgba(102, 17, 65, 1);
  --main-colour-transparent: rgba(102, 17, 65, 0.8);
  --main-colour-transparent-2: rgba(102, 17, 65, 0.6);
  --main-colour-transparent-3: rgba(102, 17, 65, 0.4);
  --secondary-colour: rgba(170, 85, 133, 1);
  --tertiary-colour: rgba(205, 136, 175, 1);
  --tertiary-colour-transparent: rgba(205, 136, 175, 0.8);

  --color-grey-100: #eeedf3;
  --color-grey-300: #b2b1c8;
  --color-grey-900: #21212c;
  --color-grey-950: #181820;
  --color-indigo-300: #a5abfd;
}

[data-color-scheme="dark"],
html:not([data-color-scheme]) {
  color-scheme: dark;
  --color-text-primary: var(--color-grey-100);
  --color-text-secondary: var(--color-grey-300);
  --color-text-brand: var(--tertiary-colour);
  --color-text-on-brand-base: var(--color-white);
  --color-bg-primary: var(--color-grey-950);
  --color-bg-secondary: var(--color-grey-900);
  --color-bg-brand-base: var(--main-colour);
  --color-bg-brand-base-hover: var(--secondary-colour);
}

body {
  background-image: radial-gradient(
    ellipse farthest-corner at 10px 10px,
    var(--color-bg-primary),
    var(--color-bg-primary) 50%,
    var(--color-bg-secondary) 50%
  );
  background-size: 10px 10px;
}