:root {
  --clr-canvas-text: light-dark(var(--clr-main-100), var(--clr-main-975));
  --clr-canvas: light-dark(var(--clr-main-975), var(--clr-main-100));
  --clr-canvas-text-disabled: light-dark(var(--clr-neutral-800), var(--clr-neutral-800));
  --clr-link: light-dark(var(--clr-csbqblue-400), var(--clr-csbqblue-600));
  --border-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-400));

  /* Messaging and notices */
  --message-background-color: light-dark(var(--clr-neutral-900), var(--clr-neutral-200));
  --message-border-color: light-dark(var(--clr-neutral-500), var(--clr-neutral-600));
  --message-text-color: light-dark(var(--clr-neutral-300), var(--clr-neutral-600));
  --message-heading-color: light-dark(var(--clr-neutral-300), var(--clr-neutral-600));

  --message-warning-background-color: light-dark(var(--clr-csbqblue-900), var(--clr-csbqblue-200));
  --message-warning-border-color: light-dark(var(--clr-csbqblue-400), var(--clr-csbqblue-600));
  --message-warning-text-color: light-dark(var(--clr-csbqblue-300), var(--clr-csbqblue-600));
  --message-warning-heading-color: light-dark(var(--clr-csbqblue-300), var(--clr-csbqblue-600));

  --message-success-background-color: light-dark(var(--clr-green-900), var(--clr-green-200));
  --message-success-border-color: light-dark(var(--clr-green-400), var(--clr-green-600));
  --message-success-text-color: light-dark(var(--clr-green-300), var(--clr-green-600));
  --message-success-heading-color: light-dark(var(--clr-green-300), var(--clr-green-600));

  --message-error-background-color: light-dark(var(--clr-pink-900), var(--clr-pink-200));
  --message-error-border-color: light-dark(var(--clr-pink-400), var(--clr-pink-600));
  --message-error-text-color: light-dark(var(--clr-pink-300), var(--clr-pink-600));
  --message-error-heading-color: light-dark(var(--clr-pink-300), var(--clr-pink-600));


  /* Form colours */
  --button-shadow-color: var(--clr-main-600);
  --button-primary-color:var(--clr-main-900);
  --button-primary-background-color: var(--clr-main-400);
  --button-primary-border-color: var(--clr-main-400);

  --button-primary-hover-color:var(--clr-main-900);
  --button-primary-hover-background-color: var(--clr-main-500);
  --button-primary-hover-border-color: var(--clr-main-500);

  --button-primary-active-color:var(--clr-main-900);
  --button-primary-active-background-color: var(--clr-main-500);
  --button-primary-active-border-color: var(--clr-main-500);

  --button-primary-focus-color:var(--clr-main-900);
  --button-primary-focus-background-color: var(--clr-main-500);
  --button-primary-focus-border-color: var(--clr-main-500);

  /* variables for secondary buttons  */
  --button-secondary-color: var(--clr-neutral-975);
  --button-secondary-background-color: var(--clr-neutral-400);
  --button-secondary-border-color: var(--clr-neutral-400);

  --button-secondary-hover-color: var(--clr-neutral-975);
  --button-secondary-hover-background-color: var(--clr-neutral-600);
  --button-secondary-hover-border-color: var(--clr-neutral-600);

  --button-secondary-active-color: var(--clr-neutral-975);
  --button-secondary-active-background-color: var(--clr-neutral-500);
  --button-secondary-active-border-color: var(--clr-neutral-500);

  --button-secondary-focus-color: var(--clr-neutral-975);
  --button-secondary-focus-background-color: var(--clr-neutral-500);
  --button-secondary-focus-border-color: var(--clr-neutral-500);

  /* Red button */
  --button-red-color: var(--clr-neutral-975);
  --button-red-background-color: var(--clr-red-400);
  --button-red-border-color: var(--clr-red-400);

  --button-red-hover-color: var(--clr-neutral-975);
  --button-red-hover-background-color: var(--clr-red-400);
  --button-red-hover-border-color: var(--clr-red-400);

  --button-red-active-color: var(--clr-neutral-975);
  --button-red-active-background-color: var(--clr-red-500);
  --button-red-active-border-color: var(--clr-red-500);

  --button-red-focus-color: var(--clr-neutral-975);
  --button-red-focus-background-color: var(--clr-red-500);
  --button-red-focus-border-color: var(--clr-red-500);


  --fieldset-background-color: var(--clr-canvas); /*  var(--clr-blue-975); */
  --fieldset-alternate-background-color: light-dark((--clr-neutral-900), var(--clr-neutral-400));
  --fieldset-border-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-400));
  --fieldset-legend-color: light-dark(var(--clr-neutral-300), var(--clr-neutral-700));
  --fieldset-label-color: var(--fieldset-legend-color);
  --fieldset-disabled-color: light-dark(var(--clr-neutral-700), var(--clr-neutral-500));
  --input-text-color: light-dark(var(--clr-neutral-300), var(--clr-neutral-700));
  --input-inverted-text-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-400));
  --input-background-color: var(--fieldset-background-color);
  --input-border-color: light-dark(var(--clr-neutral-700), var(--clr-neutral-500));
  --input-focus-border-color: light-dark(var(--clr-neutral-400), var(--clr-neutral-600));
  --input-icon-backround-color: light-dark((--clr-neutral-900), var(--clr-neutral-400));
  --input-icon-text-color: light-dark(var(--clr-neutral-400), var(--clr-neutral-800));
  --input-icon-border-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-400));
  --input-icon-focus-border-color: light-dark(var(--clr-neutral-400), var(--clr-neutral-600));
  --input-icon-hover-color: var(--clr-neutral-600);

  /* Tables */
  --table-background-color: var(--clr-canvas);
  --table-color: var(--clr-canvas-text);
  --table-border-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-400));
  --thead-background-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-300));
  --thead-color: light-dark(var(--clr-neutral-100), var(--clr-neutral-800));
  --tfoot-background-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-300));
  --tfoot-color: light-dark(var(--clr-neutral-100), var(--clr-neutral-800));
  --tbody-tr-even-background-color: light-dark(var(--clr-neutral-900), var(--clr-neutral-200));
  --tbody-tr-even-color: var(--clr-canvas-text);
  --tbody-tr-odd-background-color: var(--clr-canvas);
  --tbody-tr-odd-color: var(--clr-canvas-text);
  --tbody-tr-hover-background-color: light-dark(var(--clr-neutral-850), var(--clr-neutral-300));
  --tbody-tr-hover-color: var(--clr-canvas-text);

  /* Tabs */

  --tab-main-border-color: light-dark(var(--clr-neutral-800), var(--clr-neutral-400));
  --tab-item-background-color: var(--clr-canvas);
  --tab-item-border-color: transparent;
  --tab-item-color: var(--clr-canvas-text);

  --tab-item-active-background-color: var(--clr-canvas);
  --tab-item-active-border-color: var(--tab-main-border-color);
  --tab-item-active-color: var(--clr-canvas-text);

  --tab-content-background-color: var(--clr-canvas);
  --tab-content-border-color: transparent;

  --tab-sub-item-background-color: var(--clr-canvas);
  --tab-sub-item-border-color: transparent;
  --tab-sub-item-color: var(--clr-canvas-text);

  --tab-sub-item-active-background-color: var(--clr-canvas);
  --tab-sub-item-active-border-color: var(--tab-main-border-color);
  --tab-sub-item-active-color: var(--clr-canvas-text);

  /* Main (ochre from palettes) */
  --clr-main-100: var(--clr-csbqblue-100);
  --clr-main-200: var(--clr-csbqblue-200);
  --clr-main-300: var(--clr-csbqblue-300);
  --clr-main-400: var(--clr-csbqblue-400);
  --clr-main-500: var(--clr-csbqblue-500);
  --clr-main-600: var(--clr-csbqblue-600);
  --clr-main-700: var(--clr-csbqblue-700);
  --clr-main-800: var(--clr-csbqblue-800);
  --clr-main-900: var(--clr-csbqblue-900);
  --clr-main-975: var(--clr-csbqblue-975);
  }