body,
body.light {
  --ct-primary-colour-default: #20539E;
  --ct-primary-colour-hover: #286AC8;
  --ct-primary-colour-selected: #173D74;
  --ct-success-colour-default: #007264;
  --ct-success-colour-hover: #008574;
  --ct-success-colour-selected: #003F37;
  --ct-danger-colour-default: #961414;
  --ct-danger-colour-hover: #C11A1A;
  --ct-danger-colour-selected: #690E0E;
  --ct-caution-colour-default: #FFB340;
  --ct-caution-colour-hover: #FFC773;
  --ct-caution-colour-selected: #D29A45;
  --ct-information-colour-default: #495459;
  --ct-information-colour-hover: #606F76;
  --ct-information-colour-red: #BA1212;
  --ct-information-colour-red-highlight: #DB8585;
  --ct-information-colour-red-surface: #EAB7B7;
  --ct-information-colour-magenta: #A50056;
  --ct-information-colour-magenta-highlight: #D07CA8;
  --ct-information-colour-magenta-surface: #E3B2CC;
  --ct-information-colour-purple: #640F69;
  --ct-information-colour-purple-highlight: #AF84B2;
  --ct-information-colour-purple-surface: #D0B6D1;
  --ct-information-colour-indigo: #34288E;
  --ct-information-colour-indigo-highlight: #9791C5;
  --ct-information-colour-indigo-surface: #C1BEDC;
  --ct-information-colour-blue: #174E9E;
  --ct-information-colour-blue-highlight: #88A3CC;
  --ct-information-colour-blue-surface: #B9C9E1;
  --ct-information-colour-cyan: #00688A;
  --ct-information-colour-cyan-highlight: #7CB1C2;
  --ct-information-colour-cyan-surface: #B2D1DB;
  --ct-information-colour-teal: #007C6D;
  --ct-information-colour-teal-highlight: #7CBBB4;
  --ct-information-colour-teal-surface: #B2D7D2;
  --ct-text-colour-headings: #092030;
  --ct-text-colour-body: #4E585F;
  --ct-text-colour-data: #2B2B2B;
  --ct-text-colour-disabled: #677178;
  --ct-text-colour-tag: #FFF;
  --ct-text-colour-caution: #2B2B2B;
  --ct-background-colour-platform: #EFEFEF;
  --ct-background-colour-main: #FEFEFE;
  --ct-background-colour-surface: #F7F7F7;
  --ct-background-colour-highlight: #DDD;
  /* TODO: Move these into a proper CSS file when CtStyle.cs or similar file is configured properly*/
  --ct-background-colour-human-classification: #640F69;
  --ct-background-colour-auto-classification: #00688A;
  /* End */
  --ct-border-colour-default: #CCC;
  --ct-border-colour-disabled: #CCC;
}

body.dark {
  --ct-primary-colour-default: #B6CBE9;
  --ct-primary-colour-hover: #DCE6F4;
  --ct-primary-colour-selected: #849BBD;
  --ct-success-colour-default: #A3C7C2;
  --ct-success-colour-hover: #C3DAD7;
  --ct-success-colour-selected: #7ABDB4;
  --ct-danger-colour-default: #FFB3B3;
  --ct-danger-colour-hover: #FCC;
  --ct-danger-colour-selected: #E69999;
  --ct-caution-colour-default: #FCDAA6;
  --ct-caution-colour-hover: #FEEFD8;
  --ct-caution-colour-selected: #D3C1A7;
  --ct-information-colour-default: #A2AEB3;
  --ct-information-colour-hover: #C9C9C9;
  --ct-information-colour-red: #E4AFAF;
  --ct-information-colour-red-highlight: #8F7575;
  --ct-information-colour-red-surface: #6C5C5C;
  --ct-information-colour-magenta: #DBA0BF;
  --ct-information-colour-magenta-highlight: #8C6D7D;
  --ct-information-colour-magenta-surface: #6A5861;
  --ct-information-colour-purple: #C896CB;
  --ct-information-colour-purple-highlight: #826884;
  --ct-information-colour-purple-surface: #645565;
  --ct-information-colour-indigo: #B7B3D3;
  --ct-information-colour-indigo-highlight: #797887;
  --ct-information-colour-indigo-surface: #5F5E67;
  --ct-information-colour-blue: #A8BEDD;
  --ct-information-colour-blue-highlight: #717D8C;
  --ct-information-colour-blue-surface: #5A616A;
  --ct-information-colour-cyan: #86CEE5;
  --ct-information-colour-cyan-highlight: #608591;
  --ct-information-colour-cyan-surface: #50666D;
  --ct-information-colour-teal: #8FD4CC;
  --ct-information-colour-teal-highlight: #658984;
  --ct-information-colour-teal-surface: #536865;
  --ct-text-colour-headings: #E8EAEC;
  --ct-text-colour-body: #D5D5D5;
  --ct-text-colour-data: #E8EAEC;
  --ct-text-colour-disabled: #B3B3B3;
  --ct-text-colour-tag: #1D1D1D;
  --ct-text-colour-caution: #2B2B2B;
  --ct-background-colour-platform: #1E1E1E;
  --ct-background-colour-main: #393939;
  --ct-background-colour-surface: #434343;
  --ct-background-colour-highlight: #5F5F5F;
  /* TODO: Move these into a proper CSS file when CtStyle.cs or similar file is configured properly*/
  --ct-background-colour-human-classification: #B7B3D3;
  --ct-background-colour-auto-classification: #86CEE5;
  /* End */
  --ct-border-colour-default: #A2A0A0;
  --ct-border-colour-disabled: #434447;
}

@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --ct-primary-colour-default: #B6CBE9;
    --ct-primary-colour-hover: #DCE6F4;
    --ct-primary-colour-selected: #849BBD;
    --ct-success-colour-default: #A3C7C2;
    --ct-success-colour-hover: #C3DAD7;
    --ct-success-colour-selected: #7ABDB4;
    --ct-danger-colour-default: #FFB3B3;
    --ct-danger-colour-hover: #FCC;
    --ct-danger-colour-selected: #E69999;
    --ct-caution-colour-default: #FCDAA6;
    --ct-caution-colour-hover: #FEEFD8;
    --ct-caution-colour-selected: #D3C1A7;
    --ct-information-colour-default: #A2AEB3;
    --ct-information-colour-hover: #C9C9C9;
    --ct-information-colour-red: #E4AFAF;
    --ct-information-colour-red-highlight: #8F7575;
    --ct-information-colour-red-surface: #6C5C5C;
    --ct-information-colour-magenta: #DBA0BF;
    --ct-information-colour-magenta-highlight: #8C6D7D;
    --ct-information-colour-magenta-surface: #6A5861;
    --ct-information-colour-purple: #C896CB;
    --ct-information-colour-purple-highlight: #826884;
    --ct-information-colour-purple-surface: #645565;
    --ct-information-colour-indigo: #B7B3D3;
    --ct-information-colour-indigo-highlight: #797887;
    --ct-information-colour-indigo-surface: #5F5E67;
    --ct-information-colour-blue: #A8BEDD;
    --ct-information-colour-blue-highlight: #717D8C;
    --ct-information-colour-blue-surface: #5A616A;
    --ct-information-colour-cyan: #86CEE5;
    --ct-information-colour-cyan-highlight: #608591;
    --ct-information-colour-cyan-surface: #50666D;
    --ct-information-colour-teal: #8FD4CC;
    --ct-information-colour-teal-highlight: #658984;
    --ct-information-colour-teal-surface: #536865;
    --ct-text-colour-headings: #E8EAEC;
    --ct-text-colour-body: #D5D5D5;
    --ct-text-colour-data: #E8EAEC;
    --ct-text-colour-disabled: #B3B3B3;
    --ct-text-colour-tag: #1D1D1D;
    --ct-text-colour-caution: #2B2B2B;
    --ct-background-colour-platform: #1E1E1E;
    --ct-background-colour-main: #393939;
    --ct-background-colour-surface: #434343;
    --ct-background-colour-highlight: #5F5F5F;
    /* TODO: Move these into a proper CSS file when CtStyle.cs or similar file is configured properly*/
    --ct-background-colour-human-classification: #B7B3D3;
    --ct-background-colour-auto-classification: #86CEE5;
    /* End */
    --ct-border-colour-default: #A2A0A0;
    --ct-border-colour-disabled: #434447;
  }
}