:root {
  --hue: 0;
  --saturation: 0%;
  --lightness: 10%;
  --text-colour: #fff;

  --hue-default: 211;
  --saturation-default: 100%;
  --lightness-default: 43%;    

  --hue-primary: 211;
  --saturation-primary: 100%;
  --lightness-primary: 43%;
 
  --hue-secondary: 211;
  --saturation-secondary: 100%;
  --lightness-secondary: 43%;
  --text-colour-secondary: #fff;

  --hue-success: 211;
  --saturation-success: 100%;
  --lightness-success: 43%;
  --text-colour-success: #fff;

  --hue-info: 211;
  --saturation-info: 100%;
  --lightness-info: 43%;
  --text-colour-info: #fff;

  --hue-warning: 211;
  --saturation-warning: 100%;
  --lightness-warning: 43%;
  --text-colour-warning: #fff;

  --hue-danger: 0;
  --saturation-danger: 100%;
  --lightness-danger: 43%;
  --text-colour-danger: #fff;

  --background-delta: 1;
  --border-delta: 1;
  --background-hover-delta: 1.2;
  --border-hover-delta: 1.2;
  --background-disabled-delta: 0.7;
  --border-disabled-delta: 0.7;
  --background-active-delta: 0.9;
  --border-active-delta: 0.9;

  --background-colour: hsl(var(--hue), var(--saturation), calc(var(--lightness)*var(--background-delta)));
  --border-colour: hsl(var(--hue), var(--saturation), calc(var(--lightness)*var(--border-delta)));
  --background-colour-hover: #D9D9D6;
  --border-colour-hover: #D9D9D6;
  --background-colour-disabled:  #636A6B;
  --border-colour-disabled:  #636A6B;
  --background-colour-active: hsl(var(--hue), var(--saturation), calc(var(--lightness)*var(--background-active-delta)));
  --border-colour-active: hsl(var(--hue), var(--saturation), calc(var(--lightness)*var(--border-active-delta)));

  --text-colour-default: #FFFFFF;
  --background-colour-default: #33322E;
  --border-colour-default: #33322E;
  --text-colour-default-hover: #33322E;
  --background-colour-default-hover: #CFB18B;
  --border-colour-default-hover: #CFB18B;
  --background-colour-default-disabled:  #33322E;
  --border-colour-default-disabled:  #33322E;
  --background-colour-default-active: #666666;
  --border-colour-default-active: #666666;
  
  --background-colour-default-hover-button: #666666;
  --text-colour-default-hover-button: #FFFFFF;
  --border-colour-default-hover-button: #666666;

  --text-colour-primary: #FFFFFF;
  --background-colour-primary: #33322E;
  --border-colour-primary: #33322E;
  --background-colour-primary-hover: #666666;
  --border-colour-primary-hover: #666666;
  --background-colour-primary-disabled:  #33322E;
  --border-colour-primary-disabled:  #33322E;
  --background-colour-primary-active: #666666;
  --border-colour-primary-active: #666666;

  --background-colour-secondary: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--background-delta)));
  --border-colour-secondary: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--border-delta)));
  --background-colour-secondary-hover: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--background-hover-delta)));
  --border-colour-secondary-hover: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--border-hover-delta)));
  --background-colour-secondary-disabled: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--background-disabled-delta)));
  --border-colour-secondary-disabled: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--border-disabled-delta)));
  --background-colour-secondary-active: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--background-active-delta)));
  --border-colour-secondary-active: hsl(var(--hue-secondary), var(--saturation-secondary), calc(var(--lightness-secondary)*var(--border-active-delta)));

  --text-colour-success: #fff;
  --background-colour-success: #636A6B;;
  --border-colour-success: #636A6B;
  --text-colour-success-hover: #023635;
  --background-colour-success-hover: #2CD7EB;
  --border-colour-success-hover: #2CD7EB;
  --background-colour-success-disabled:  #636A6B;
  --border-colour-success-disabled:  #636A6B;
  --background-colour-success-active: #2CD7EB;
  --border-colour-success-active: #2CD7EB;
  
  --background-colour-default-breadcrumb: #FFFFFF;
  --text-colour-default-breadcrumb: #33322E;
  --background-colour-primary-breadcrumb: #CFB18B;
  --text-colour-primary-breadcrumb: #33322E;
  --background-colour-primary-hover-breadcrumb: #F1E8DC;


  --background-colour-info: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--background-delta)));
  --border-colour-info: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--border-delta)));
  --background-colour-info-hover: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--background-hover-delta)));
  --border-colour-info-hover: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--border-hover-delta)));
  --background-colour-info-disabled: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--background-disabled-delta)));
  --border-colour-info-disabled: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--border-disabled-delta)));
  --background-colour-info-active: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--background-active-delta)));
  --border-colour-info-active: hsl(var(--hue-info), var(--saturation-info), calc(var(--lightness-info)*var(--border-active-delta)));

  --background-colour-warning: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--background-delta)));
  --border-colour-warning: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--border-delta)));
  --background-colour-warning-hover: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--background-hover-delta)));
  --border-colour-warning-hover: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--border-hover-delta)));
  --background-colour-warning-disabled: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--background-disabled-delta)));
  --border-colour-warning-disabled: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--border-disabled-delta)));
  --background-colour-warning-active: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--background-active-delta)));
  --border-colour-warning-active: hsl(var(--hue-warning), var(--saturation-warning), calc(var(--lightness-warning)*var(--border-active-delta)));

  --background-colour-danger: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--background-delta)));
  --border-colour-danger: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--border-delta)));
  --background-colour-danger-hover: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--background-hover-delta)));
  --border-colour-danger-hover: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--border-hover-delta)));
  --background-colour-danger-disabled: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--background-disabled-delta)));
  --border-colour-danger-disabled: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--border-disabled-delta)));
  --background-colour-danger-active: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--background-active-delta)));
  --border-colour-danger-active: hsl(var(--hue-danger), var(--saturation-danger), calc(var(--lightness-danger)*var(--border-active-delta)));
}