:root {
    /* Sizes */
    --size-144: 9rem;
    --size-128: 8rem;
    --size-112: 7rem;
    --size-96: 6rem;
    --size-80: 5rem;
    --size-72: 4.5rem;
    --size-64: 4rem;
    --size-56: 3.5rem;
    --size-48: 3rem;
    --size-44: 2.75rem;
    --size-40: 2.5rem;
    --size-36: 2.25rem;
    --size-32: 2rem;
    --size-28: 1.75rem;
    --size-24: 1.5rem;
    --size-20: 1.25rem;
    --size-18: 1.125rem;
    --size-16: 1rem;
    --size-14: 0.875rem;
    --size-13: 0.8125rem;
    --size-12: 0.75rem;
    --size-10: 0.625rem;
    --size-8: 0.5rem;
    --size-6: 0.375rem;
    --size-4: 0.25rem;
    --size-2: 0.125rem;
    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-48: var(--size-48) / 1.2 var(--font-family);
    --font-44: var(--size-44) / 1.2 var(--font-family);
    --font-40: var(--size-40) / 1.2 var(--font-family);
    --font-36: var(--size-36) / 1.2 var(--font-family);
    --font-32: var(--size-32) / 1.2 var(--font-family);
    --font-28: var(--size-28) / 1.2 var(--font-family);
    --font-24: var(--size-24) / 1.3 var(--font-family);
    --font-20: var(--size-20) / 1.3 var(--font-family);
    --font-18: var(--size-18) / 1.3 var(--font-family);
    --font-16: var(--size-16) / 1.3 var(--font-family);
    --font-14: var(--size-14) / 1.3 var(--font-family);
    --font-13: var(--size-13) / 1.3 var(--font-family);
    --font-12: var(--size-12) / 1.3 var(--font-family);
    /* Radius */
    --radius-r: 1000px;
    --radius-24: 24px;
    --radius-20: 20px;
    --radius-16: 16px;
    --radius-12: 12px;
    --radius-8: 8px;
    --radius-6: 6px;
    --radius-4: 4px;
    --radius-2: 2px;
    /* Colours */
    --colour-fg-default: hsl(213, 13%, 16%);
    --colour-fg-muted: hsl(212, 10%, 38%);
    --colour-fg-subtle: hsl(212, 8%, 47%);
    --colour-fg-on-emphasis: hsl(0, 0%, 100%);
    --colour-bg-default: hsl(0, 0%, 100%);
    --colour-bg-overlay: hsl(0, 0%, 100%);
    --colour-bg-inset: hsl(210, 24%, 96%);
    --colour-bg-subtle: hsl(210, 24%, 92%);
    --colour-bg-muted: hsl(210, 90%, 90%);

    --colour-border-default: hsl(210, 18%, 84%);
    --colour-border-muted: hsla(210, 18%, 87%, 1);
    --colour-border-subtle: hsla(213, 14%, 12%, 0.05);
    --colour-brand-default: hsl(200, 90%, 50%);
    --colour-neutral-emphasis-plus: hsl(213, 13%, 16%);
    --colour-neutral-emphasis: hsl(212, 8%, 47%);
    --colour-neutral-muted: hsla(210, 13%, 72%, 0.2);
    --colour-neutral-subtle: hsla(210, 24%, 93%, 0.5);
    --colour-accent-fg: hsl(212, 92%, 45%);
    --colour-accent-emphasis: hsl(212, 92%, 45%);
    --colour-accent-muted: hsla(208, 100%, 66%, 0.4);
    --colour-accent-subtle: hsl(199, 100%, 93%);
    --colour-success-fg: hsl(137, 66%, 30%);
    --colour-success-emphasis: hsl(137, 57%, 41%);
    --colour-success-muted: hsla(137, 50%, 53%, 0.4);
    --colour-success-subtle: hsl(133, 80%, 92%);
    --colour-attention-fg: hsl(40, 100%, 30%);
    --colour-attention-emphasis: hsl(42, 100%, 37%);
    --colour-attention-muted: hsla(44, 66%, 50%, 0.4);
    --colour-attention-subtle: hsl(53, 100%, 89%);
    --colour-severe-fg: hsl(24, 100%, 37%);
    --colour-severe-emphasis: hsl(24, 100%, 37%);
    --colour-severe-muted: hsla(25, 96%, 63%, 0.4);
    --colour-severe-subtle: hsl(28, 100%, 95%);
    --colour-danger-fg: hsl(356, 72%, 47%);
    --colour-danger-emphasis: hsl(356, 72%, 47%);
    --colour-danger-muted: hsla(360, 100%, 75%, 0.4);
    --colour-danger-subtle: hsl(5, 100%, 96%);
    --colour-open-fg: hsl(137, 66%, 30%);
    --colour-open-emphasis: hsl(137, 57%, 41%);
    --colour-open-muted: hsla(137, 50%, 53%, 0.4);
    --colour-open-subtle: hsl(133, 80%, 92%);
    --colour-closed-fg: hsl(356, 72%, 47%);
    --colour-closed-emphasis: hsl(356, 72%, 47%);
    --colour-closed-muted: hsla(360, 100%, 75%, 0.4);
    --colour-closed-subtle: hsl(5, 100%, 96%);
    --colour-done-fg: hsl(261, 69%, 59%);
    --colour-done-emphasis: hsl(261, 69%, 59%);
    --colour-done-muted: hsla(265, 100%, 80%, 0.4);
    --colour-done-subtle: hsl(285, 100%, 97%);
    --colour-special-fg: hsl(324, 54%, 49%);
    --colour-special-emphasis: hsl(324, 54%, 49%);
    --colour-special-muted: hsla(326, 100%, 75%, 0.4);
    --colour-special-subtle: hsl(330, 100%, 97%);
    /* Shadow */
    --shadow-small: 0 1px 0 hsla(213, 14%, 12%, 0.04);
    --shadow-medium: 0 3px 6px hsla(212, 9%, 59%, 0.15);
    --shadow-large: 0 8px 24px hsla(212, 9%, 59%, 0.2);
    --shadow-extra-large: 0 12px 28px hsla(212, 9%, 59%, 0.3);
    /* Theming */
    &.light-contrast {
      --colour-fg-default: hsl(218, 22%, 7%);
      --colour-fg-muted: hsl(218, 22%, 7%);
      --colour-fg-subtle: hsl(211, 9%, 44%);
      --colour-fg-on-emphasis: hsl(0, 0%, 100%);

      --colour-bg-default: hsl(0, 0%, 100%);
      --colour-bg-overlay: hsl(0, 0%, 100%);
      --colour-bg-inset: hsl(0, 0%, 100%);
      --colour-bg-subtle: hsl(207, 23%, 92%);

      --colour-border-default: hsl(215, 16%, 15%);
      --colour-border-muted: hsl(211, 10%, 57%);
      --colour-border-subtle: hsla(218, 80%, 2%, 0.8);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(218, 22%, 7%);
      --colour-neutral-emphasis: hsl(211, 9%, 44%);
      --colour-neutral-muted: hsla(210, 14%, 71%, 0.2);
      --colour-neutral-subtle: hsl(207, 23%, 92%);

      --colour-accent-fg: hsl(216, 97%, 36%);
      --colour-accent-emphasis: hsl(216, 97%, 36%);
      --colour-accent-muted: hsl(214, 94%, 59%);
      --colour-accent-subtle: hsl(195, 100%, 94%);

      --colour-success-fg: hsl(138, 90%, 19%);
      --colour-success-emphasis: hsl(138, 90%, 19%);
      --colour-success-muted: hsl(137, 62%, 39%);
      --colour-success-subtle: hsl(132, 96%, 91%);

      --colour-attention-fg: hsl(36, 100%, 23%);
      --colour-attention-emphasis: hsl(36, 100%, 23%);
      --colour-attention-muted: hsl(43, 93%, 37%);
      --colour-attention-subtle: hsl(55, 91%, 87%);

      --colour-severe-fg: hsl(25, 100%, 26%);
      --colour-severe-emphasis: hsl(25, 100%, 26%);
      --colour-severe-muted: hsl(26, 79%, 48%);
      --colour-severe-subtle: hsl(41, 100%, 92%);

      --colour-danger-fg: hsl(354, 81%, 35%);
      --colour-danger-emphasis: hsl(354, 81%, 35%);
      --colour-danger-muted: hsl(359, 81%, 64%);
      --colour-danger-subtle: hsl(7, 100%, 97%);

      --colour-open-fg: hsl(138, 90%, 19%);
      --colour-open-emphasis: hsl(138, 76%, 28%);
      --colour-open-muted: hsla(137, 62%, 39%, 0.4);
      --colour-open-subtle: hsl(132, 96%, 91%);

      --colour-closed-fg: hsl(354, 81%, 35%);
      --colour-closed-emphasis: hsl(354, 81%, 35%);
      --colour-closed-muted: hsla(359, 81%, 64%, 0.4);
      --colour-closed-subtle: hsl(7, 100%, 97%);

      --colour-done-fg: hsl(263, 62%, 45%);
      --colour-done-emphasis: hsl(263, 62%, 45%);
      --colour-done-muted: hsl(262, 89%, 71%);
      --colour-done-subtle: hsl(283, 88%, 97%);

      --colour-special-fg: hsl(321, 78%, 33%);
      --colour-special-emphasis: hsl(321, 78%, 33%);
      --colour-special-muted: hsl(323, 82%, 61%);
      --colour-special-subtle: hsl(328, 88%, 97%);

      /* Shadow */
      --shadow-small: 0 1px 0 hsla(218, 80%, 2%, 0.04);
      --shadow-medium: 0 3px 6px hsla(211, 10%, 57%, 0.15);
      --shadow-large: 0 8px 24px hsla(211, 10%, 57%, 0.2);
      --shadow-extra-large: 0 12px 28px hsla(211, 10%, 57%, 0.3);
   }

   &.light-colourblind {
      --colour-fg-default: hsl(213, 13%, 16%);
      --colour-fg-muted: hsl(212, 10%, 38%);
      --colour-fg-subtle: hsl(212, 8%, 47%);
      --colour-fg-on-emphasis: hsl(0, 0%, 100%);

      --colour-bg-default: hsl(0, 0%, 100%);
      --colour-bg-overlay: hsl(0, 0%, 100%);
      --colour-bg-inset: hsl(210, 29%, 97%);
      --colour-bg-subtle: hsl(210, 29%, 97%);

      --colour-border-default: hsl(210, 18%, 84%);
      --colour-border-muted: hsla(210, 18%, 87%, 1);
      --colour-border-subtle: hsla(213, 14%, 12%, 0.15);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(213, 13%, 16%);
      --colour-neutral-emphasis: hsl(212, 8%, 47%);
      --colour-neutral-muted: hsla(210, 13%, 72%, 0.2);
      --colour-neutral-subtle: hsla(210, 24%, 93%, 0.5);

      --colour-accent-fg: hsl(212, 92%, 45%);
      --colour-accent-emphasis: hsl(212, 92%, 45%);
      --colour-accent-muted: hsla(208, 100%, 66%, 0.4);
      --colour-accent-subtle: hsl(199, 100%, 93%);

      --colour-success-fg: hsl(212, 92%, 45%);
      --colour-success-emphasis: hsl(211, 100%, 56%);
      --colour-success-muted: hsla(208, 100%, 66%, 0.4);
      --colour-success-subtle: hsl(199, 100%, 93%);

      --colour-attention-fg: hsl(40, 100%, 30%);
      --colour-attention-emphasis: hsl(42, 100%, 37%);
      --colour-attention-muted: hsla(44, 66%, 50%, 0.4);
      --colour-attention-subtle: hsl(53, 100%, 89%);

      --colour-severe-fg: hsl(30, 100%, 35%);
      --colour-severe-emphasis: hsl(30, 100%, 35%);
      --colour-severe-muted: hsla(30, 92%, 60%, 0.4);
      --colour-severe-subtle: hsl(34, 100%, 95%);

      --colour-danger-fg: hsl(30, 100%, 35%);
      --colour-danger-emphasis: hsl(30, 100%, 35%);
      --colour-danger-muted: hsla(30, 92%, 60%, 0.4);
      --colour-danger-subtle: hsl(34, 100%, 95%);

      --colour-open-fg: hsl(30, 100%, 35%);
      --colour-open-emphasis: hsl(30, 83%, 47%);
      --colour-open-muted: hsla(30, 92%, 60%, 0.4);
      --colour-open-subtle: hsl(34, 100%, 95%);

      --colour-closed-fg: hsl(212, 8%, 47%);
      --colour-closed-emphasis: hsl(212, 8%, 47%);
      --colour-closed-muted: hsla(210, 13%, 72%, 0.4);
      --colour-closed-subtle: hsl(210, 29%, 97%);

      --colour-done-fg: hsl(261, 69%, 59%);
      --colour-done-emphasis: hsl(261, 69%, 59%);
      --colour-done-muted: hsla(265, 100%, 80%, 0.4);
      --colour-done-subtle: hsl(285, 100%, 97%);

      --colour-special-fg: hsl(324, 54%, 49%);
      --colour-special-emphasis: hsl(324, 54%, 49%);
      --colour-special-muted: hsla(326, 100%, 75%, 0.4);
      --colour-special-subtle: hsl(330, 100%, 97%);

      /* Shadow */
      --shadow-small: 0 1px 0 hsla(213, 14%, 12%, 0.04);
      --shadow-medium: 0 3px 6px hsla(212, 9%, 59%, 0.15);
      --shadow-large: 0 8px 24px hsla(212, 9%, 59%, 0.2);
      --shadow-extra-large: 0 12px 28px hsla(212, 9%, 59%, 0.3);
   }

   &.light-tritanopia {
      --colour-fg-default: hsl(213, 13%, 16%);
      --colour-fg-muted: hsl(212, 10%, 38%);
      --colour-fg-subtle: hsl(212, 8%, 47%);
      --colour-fg-on-emphasis: hsl(0, 0%, 100%);

      --colour-bg-default: hsl(0, 0%, 100%);
      --colour-bg-overlay: hsl(0, 0%, 100%);
      --colour-bg-inset: hsl(210, 29%, 97%);
      --colour-bg-subtle: hsl(210, 29%, 97%);

      --colour-border-default: hsl(210, 18%, 84%);
      --colour-border-muted: hsla(210, 18%, 87%, 1);
      --colour-border-subtle: hsla(213, 14%, 12%, 0.15);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(213, 13%, 16%);
      --colour-neutral-emphasis: hsl(212, 8%, 47%);
      --colour-neutral-muted: hsla(210, 13%, 72%, 0.2);
      --colour-neutral-subtle: hsla(210, 24%, 93%, 0.5);

      --colour-accent-fg: hsl(212, 92%, 45%);
      --colour-accent-emphasis: hsl(212, 92%, 45%);
      --colour-accent-muted: hsla(208, 100%, 66%, 0.4);
      --colour-accent-subtle: hsl(199, 100%, 93%);

      --colour-success-fg: hsl(212, 92%, 45%);
      --colour-success-emphasis: hsl(211, 100%, 56%);
      --colour-success-muted: hsla(208, 100%, 66%, 0.4);
      --colour-success-subtle: hsl(199, 100%, 93%);

      --colour-attention-fg: hsl(40, 100%, 30%);
      --colour-attention-emphasis: hsl(42, 100%, 37%);
      --colour-attention-muted: hsla(44, 66%, 50%, 0.4);
      --colour-attention-subtle: hsl(53, 100%, 89%);

      --colour-severe-fg: hsl(30, 100%, 35%);
      --colour-severe-emphasis: hsl(30, 100%, 35%);
      --colour-severe-muted: hsla(30, 92%, 60%, 0.4);
      --colour-severe-subtle: hsl(34, 100%, 95%);

      --colour-danger-fg: hsl(30, 100%, 35%);
      --colour-danger-emphasis: hsl(30, 100%, 35%);
      --colour-danger-muted: hsla(30, 92%, 60%, 0.4);
      --colour-danger-subtle: hsl(34, 100%, 95%);

      --colour-open-fg: hsl(30, 100%, 35%);
      --colour-open-emphasis: hsl(30, 83%, 47%);
      --colour-open-muted: hsla(30, 92%, 60%, 0.4);
      --colour-open-subtle: hsl(34, 100%, 95%);

      --colour-closed-fg: hsl(212, 8%, 47%);
      --colour-closed-emphasis: hsl(212, 8%, 47%);
      --colour-closed-muted: hsla(210, 13%, 72%, 0.4);
      --colour-closed-subtle: hsl(210, 29%, 97%);

      --colour-done-fg: hsl(261, 69%, 59%);
      --colour-done-emphasis: hsl(261, 69%, 59%);
      --colour-done-muted: hsla(265, 100%, 80%, 0.4);
      --colour-done-subtle: hsl(285, 100%, 97%);

      --colour-special-fg: hsl(324, 54%, 49%);
      --colour-special-emphasis: hsl(324, 54%, 49%);
      --colour-special-muted: hsla(326, 100%, 75%, 0.4);
      --colour-special-subtle: hsl(330, 100%, 97%);

      /* Shadow */
      --shadow-small: 0 1px 0 hsla(213, 14%, 12%, 0.04);
      --shadow-medium: 0 3px 6px hsla(212, 9%, 59%, 0.15);
      --shadow-large: 0 8px 24px hsla(212, 9%, 59%, 0.2);
      --shadow-extra-large: 0 12px 28px hsla(212, 9%, 59%, 0.3);
   }

   &.dark {
      --colour-fg-default: hsl(210, 17%, 82%);
      --colour-fg-muted: hsl(212, 9%, 58%);
      --colour-fg-subtle: hsl(215, 8%, 47%);
      --colour-fg-on-emphasis: hsl(0, 0%, 100%);

      --colour-bg-default: hsl(216, 28%, 7%);
      --colour-bg-overlay: hsl(215, 21%, 11%);
      --colour-bg-inset: hsl(218, 80%, 2%);
      --colour-bg-subtle: hsl(215, 21%, 11%);

      --colour-border-default: hsl(212, 12%, 21%);
      --colour-border-muted: hsl(215, 15%, 15%);
      --colour-border-subtle: hsla(210, 67%, 96%, 0.1);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(215, 8%, 47%);
      --colour-neutral-emphasis: hsl(215, 8%, 47%);
      --colour-neutral-muted: hsla(215, 8%, 47%, 0.4);
      --colour-neutral-subtle: hsla(215, 8%, 47%, 0.1);

      --colour-accent-fg: hsl(212, 100%, 67%);
      --colour-accent-emphasis: hsl(216, 84%, 52%);
      --colour-accent-muted: hsla(215, 98%, 61%, 0.4);
      --colour-accent-subtle: hsla(215, 98%, 61%, 0.15);

      --colour-success-fg: hsl(128, 49%, 49%);
      --colour-success-emphasis: hsl(132, 59%, 33%);
      --colour-success-muted: hsla(131, 55%, 40%, 0.4);
      --colour-success-subtle: hsla(131, 55%, 40%, 0.15);

      --colour-attention-fg: hsl(41, 72%, 48%);
      --colour-attention-emphasis: hsl(40, 96%, 32%);
      --colour-attention-muted: hsla(40, 91%, 38%, 0.4);
      --colour-attention-subtle: hsla(40, 91%, 38%, 0.15);

      --colour-severe-fg: hsl(23, 71%, 51%);
      --colour-severe-emphasis: hsl(21, 73%, 43%);
      --colour-severe-muted: hsla(23, 71%, 51%, 0.4);
      --colour-severe-subtle: hsla(23, 71%, 51%, 0.15);

      --colour-danger-fg: hsl(3, 93%, 63%);
      --colour-danger-emphasis: hsl(1, 69%, 53%);
      --colour-danger-muted: hsla(3, 93%, 63%, 0.4);
      --colour-danger-subtle: hsla(3, 93%, 63%, 0.15);

      --colour-open-fg: hsl(128, 49%, 49%);
      --colour-open-emphasis: hsl(132, 59%, 33%);
      --colour-open-muted: hsla(131, 55%, 40%, 0.4);
      --colour-open-subtle: hsla(131, 55%, 40%, 0.15);

      --colour-closed-fg: hsl(3, 93%, 63%);
      --colour-closed-emphasis: hsl(1, 69%, 53%);
      --colour-closed-muted: hsla(3, 93%, 63%, 0.4);
      --colour-closed-subtle: hsla(3, 93%, 63%, 0.15);

      --colour-done-fg: hsl(262, 89%, 71%);
      --colour-done-emphasis: hsl(261, 73%, 62%);
      --colour-done-muted: hsla(262, 89%, 71%, 0.4);
      --colour-done-subtle: hsla(262, 89%, 71%, 0.15);

      --colour-special-fg: hsl(328, 63%, 62%);
      --colour-special-emphasis: hsl(327, 48%, 52%);
      --colour-special-muted: hsla(328, 63%, 62%, 0.4);
      --colour-special-subtle: hsla(328, 63%, 62%, 0.15);

      /* Shadow */
      --shadow-small: 0 0 transparent;
      --shadow-medium: 0 3px 6px hsl(218, 80%, 2%);
      --shadow-large: 0 8px 24px hsl(218, 80%, 2%);
      --shadow-extra-large: 0 12px 48px hsl(218, 80%, 2%);
   }

   &.dark-contrast {
      --colour-fg-default: hsl(210, 25%, 95%);
      --colour-fg-muted: hsl(210, 25%, 95%);
      --colour-fg-subtle: hsl(214, 12%, 66%);
      --colour-fg-on-emphasis: hsl(220, 23%, 5%);

      --colour-bg-default: hsl(220, 23%, 5%);
      --colour-bg-overlay: hsl(220, 13%, 18%);
      --colour-bg-inset: hsl(218, 80%, 2%);
      --colour-bg-subtle: hsl(220, 13%, 18%);

      --colour-border-default: hsl(216, 8%, 52%);
      --colour-border-muted: hsl(216, 8%, 52%);
      --colour-border-subtle: hsl(216, 8%, 52%);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(0, 0%, 100%);
      --colour-neutral-emphasis: hsl(214, 12%, 66%);
      --colour-neutral-muted: hsla(214, 12%, 66%, 0.4);
      --colour-neutral-subtle: hsla(214, 12%, 66%, 0.1);

      --colour-accent-fg: hsl(210, 100%, 72%);
      --colour-accent-emphasis: hsl(210, 100%, 63%);
      --colour-accent-muted: hsl(210, 100%, 63%);
      --colour-accent-subtle: hsla(210, 100%, 63%, 0.15);

      --colour-success-fg: hsl(134, 69%, 48%);
      --colour-success-emphasis: hsl(137, 90%, 37%);
      --colour-success-muted: hsl(137, 90%, 37%);
      --colour-success-subtle: hsla(137, 90%, 37%, 0.15);

      --colour-attention-fg: hsl(42, 87%, 56%);
      --colour-attention-emphasis: hsl(40, 84%, 48%);
      --colour-attention-muted: hsl(40, 84%, 48%);
      --colour-attention-subtle: hsla(40, 84%, 48%, 0.15);

      --colour-severe-fg: hsl(30, 81%, 51%);
      --colour-severe-emphasis: hsl(30, 81%, 51%);
      --colour-severe-muted: hsl(30, 81%, 51%);
      --colour-severe-subtle: hsla(30, 81%, 51%, 0.15);

      --colour-danger-fg: hsl(0, 100%, 71%);
      --colour-danger-emphasis: hsl(0, 100%, 71%);
      --colour-danger-muted: hsl(0, 100%, 71%);
      --colour-danger-subtle: hsla(0, 100%, 71%, 0.15);

      --colour-open-fg: hsl(134, 69%, 48%);
      --colour-open-emphasis: hsl(137, 90%, 37%);
      --colour-open-muted: hsla(137, 90%, 37%, 0.4);
      --colour-open-subtle: hsla(137, 90%, 37%, 0.15);

      --colour-closed-fg: hsl(0, 100%, 71%);
      --colour-closed-emphasis: hsl(0, 100%, 71%);
      --colour-closed-muted: hsla(0, 100%, 71%, 0.4);
      --colour-closed-subtle: hsla(0, 100%, 71%, 0.15);

      --colour-done-fg: hsl(266, 100%, 75%);
      --colour-done-emphasis: hsl(267, 100%, 75%);
      --colour-done-muted: hsl(266, 100%, 75%);
      --colour-done-subtle: hsla(266, 100%, 75%, 0.15);

      --colour-special-fg: hsl(329, 80%, 68%);
      --colour-special-emphasis: hsl(329, 80%, 68%);
      --colour-special-muted: hsl(329, 80%, 68%);
      --colour-special-subtle: hsla(329, 80%, 68%, 0.15);

      /* Shadow */
      --shadow-small: 0 0 transparent;
      --shadow-medium: 0 3px 6px hsl(218, 80%, 2%);
      --shadow-large: 0 8px 24px hsl(218, 80%, 2%);
      --shadow-extra-large: 0 12px 48px hsl(218, 80%, 2%);
   }

   &.dark-colourblind {
      --colour-fg-default: hsl(210, 17%, 82%);
      --colour-fg-muted: hsl(212, 9%, 58%);
      --colour-fg-subtle: hsl(215, 8%, 47%);
      --colour-fg-on-emphasis: hsl(0, 0%, 100%);

      --colour-bg-default: hsl(216, 28%, 7%);
      --colour-bg-overlay: hsl(215, 21%, 11%);
      --colour-bg-inset: hsl(218, 80%, 2%);
      --colour-bg-subtle: hsl(215, 21%, 11%);

      --colour-border-default: hsl(212, 12%, 21%);
      --colour-border-muted: hsl(215, 15%, 15%);
      --colour-border-subtle: hsla(210, 67%, 96%, 0.1);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(215, 8%, 47%);
      --colour-neutral-emphasis: hsl(215, 8%, 47%);
      --colour-neutral-muted: hsla(215, 8%, 47%, 0.4);
      --colour-neutral-subtle: hsla(215, 8%, 47%, 0.1);

      --colour-accent-fg: hsl(212, 100%, 67%);
      --colour-accent-emphasis: hsl(216, 84%, 52%);
      --colour-accent-muted: hsla(215, 98%, 61%, 0.4);
      --colour-accent-subtle: hsla(215, 98%, 61%, 0.15);

      --colour-success-fg: hsl(212, 100%, 67%);
      --colour-success-emphasis: hsl(216, 84%, 52%);
      --colour-success-muted: hsla(215, 98%, 61%, 0.4);
      --colour-success-subtle: hsla(215, 98%, 61%, 0.15);

      --colour-attention-fg: hsl(41, 72%, 48%);
      --colour-attention-emphasis: hsl(40, 96%, 32%);
      --colour-attention-muted: hsla(40, 91%, 38%, 0.4);
      --colour-attention-subtle: hsla(40, 91%, 38%, 0.15);

      --colour-severe-fg: hsl(30, 81%, 46%);
      --colour-severe-emphasis: hsl(32, 100%, 36%);
      --colour-severe-muted: hsla(30, 81%, 46%, 0.4);
      --colour-severe-subtle: hsla(30, 81%, 46%, 0.15);

      --colour-danger-fg: hsl(30, 81%, 46%);
      --colour-danger-emphasis: hsl(32, 100%, 36%);
      --colour-danger-muted: hsla(30, 81%, 46%, 0.4);
      --colour-danger-subtle: hsla(30, 81%, 46%, 0.15);

      --colour-open-fg: hsl(31, 83%, 55%);
      --colour-open-emphasis: hsl(32, 100%, 36%);
      --colour-open-muted: hsla(30, 81%, 46%, 0.4);
      --colour-open-subtle: hsla(30, 81%, 46%, 0.15);

      --colour-closed-fg: hsl(212, 9%, 58%);
      --colour-closed-emphasis: hsl(215, 8%, 47%);
      --colour-closed-muted: hsla(215, 8%, 47%, 0.4);
      --colour-closed-subtle: hsla(215, 8%, 47%, 0.1);

      --colour-done-fg: hsl(262, 89%, 71%);
      --colour-done-emphasis: hsl(261, 73%, 62%);
      --colour-done-muted: hsla(262, 89%, 71%, 0.4);
      --colour-done-subtle: hsla(262, 89%, 71%, 0.15);

      --colour-special-fg: hsl(328, 63%, 62%);
      --colour-special-emphasis: hsl(327, 48%, 52%);
      --colour-special-muted: hsla(328, 63%, 62%, 0.4);
      --colour-special-subtle: hsla(328, 63%, 62%, 0.15);

      /* Shadow */
      --shadow-small: 0 0 transparent;
      --shadow-medium: 0 3px 6px hsl(218, 80%, 2%);
      --shadow-large: 0 8px 24px hsl(218, 80%, 2%);
      --shadow-extra-large: 0 12px 48px hsl(218, 80%, 2%);
   }

   &.dark-tritanopia {
      --colour-fg-default: hsl(210, 17%, 82%);
      --colour-fg-muted: hsl(212, 9%, 58%);
      --colour-fg-subtle: hsl(215, 8%, 47%);
      --colour-fg-on-emphasis: hsl(0, 0%, 100%);

      --colour-bg-default: hsl(216, 28%, 7%);
      --colour-bg-overlay: hsl(215, 21%, 11%);
      --colour-bg-inset: hsl(218, 80%, 2%);
      --colour-bg-subtle: hsl(215, 21%, 11%);

      --colour-border-default: hsl(212, 12%, 21%);
      --colour-border-muted: hsl(215, 15%, 15%);
      --colour-border-subtle: hsla(210, 67%, 96%, 0.1);

      --colour-brand-default: hsl(200, 90%, 50%);

      --colour-neutral-emphasis-plus: hsl(215, 8%, 47%);
      --colour-neutral-emphasis: hsl(215, 8%, 47%);
      --colour-neutral-muted: hsla(215, 8%, 47%, 0.4);
      --colour-neutral-subtle: hsla(215, 8%, 47%, 0.1);

      --colour-accent-fg: hsl(212, 100%, 67%);
      --colour-accent-emphasis: hsl(216, 84%, 52%);
      --colour-accent-muted: hsla(215, 98%, 61%, 0.4);
      --colour-accent-subtle: hsla(215, 98%, 61%, 0.15);

      --colour-success-fg: hsl(212, 100%, 67%);
      --colour-success-emphasis: hsl(216, 84%, 52%);
      --colour-success-muted: hsla(215, 98%, 61%, 0.4);
      --colour-success-subtle: hsla(215, 98%, 61%, 0.15);

      --colour-attention-fg: hsl(41, 72%, 48%);
      --colour-attention-emphasis: hsl(40, 96%, 32%);
      --colour-attention-muted: hsla(40, 91%, 38%, 0.4);
      --colour-attention-subtle: hsla(40, 91%, 38%, 0.15);

      --colour-severe-fg: hsl(3, 93%, 63%);
      --colour-severe-emphasis: hsl(1, 69%, 53%);
      --colour-severe-muted: hsla(3, 93%, 63%, 0.4);
      --colour-severe-subtle: hsla(3, 93%, 63%, 0.15);

      --colour-danger-fg: hsl(3, 93%, 63%);
      --colour-danger-emphasis: hsl(1, 69%, 53%);
      --colour-danger-muted: hsla(3, 93%, 63%, 0.4);
      --colour-danger-subtle: hsla(3, 93%, 63%, 0.15);

      --colour-open-fg: hsl(4, 100%, 72%);
      --colour-open-emphasis: hsl(1, 69%, 53%);
      --colour-open-muted: hsla(3, 93%, 63%, 0.4);
      --colour-open-subtle: hsla(3, 93%, 63%, 0.15);

      --colour-closed-fg: hsl(212, 9%, 58%);
      --colour-closed-emphasis: hsl(215, 8%, 47%);
      --colour-closed-muted: hsla(215, 8%, 47%, 0.4);
      --colour-closed-subtle: hsla(215, 8%, 47%, 0.1);

      --colour-done-fg: hsl(262, 89%, 71%);
      --colour-done-emphasis: hsl(261, 73%, 62%);
      --colour-done-muted: hsla(262, 89%, 71%, 0.4);
      --colour-done-subtle: hsla(262, 89%, 71%, 0.15);

      --colour-special-fg: hsl(328, 63%, 62%);
      --colour-special-emphasis: hsl(327, 48%, 52%);
      --colour-special-muted: hsla(328, 63%, 62%, 0.4);
      --colour-special-subtle: hsla(328, 63%, 62%, 0.15);

      /* Shadow */
      --shadow-small: 0 0 transparent;
      --shadow-medium: 0 3px 6px hsl(218, 80%, 2%);
      --shadow-large: 0 8px 24px hsl(218, 80%, 2%);
      --shadow-extra-large: 0 12px 48px hsl(218, 80%, 2%);
   }
}