@import url('https://fonts.googleapis.com/css?family=Quicksand');

/*
  Colour palette using logo colour as start point
  From : https://mycolor.space/?hex=%23330099&sub=1
  Section matching gradient

  #330099   mid/ dark blue  - logo colour   - rgb(0, 197, 223)
  #004dd2   mid blue
  #0079ef   mid/ light blue
  #00a0f1   light blue
  #00c5df   light blue/ green
  #00e7c4   light blue/ stronger green

  Also consider Section Generic Gradient for highlight colours
  #330099   mid/ dark blue  - logo colour
  #ad0082   similar depth purple
  #eb0561   similar depth red
  #ff6f46   similar depth orange
  #ffb743   similar depth light orange
  #f9f871   similar depth soft yellow

*/

:root{
  --WVV-colour1: #330099;
  --WVV-colour2: #004dd2;
  --WVV-colour3: #0079ef;
  --WVV-colour4: #00a0f1;
  --WVV-colour5: #00c5df;
  --WVV-colour6: #00e7c4;

  --WVV-highlight1: #330099;
  --WVV-highlight2: #ad0082;
  --WVV-highlight3: #eb0561;
  --WVV-highlight4: #ff6f46;
  --WVV-highlight5: #ffb743;
  --WVV-highlight6: #f9f871;

  --WVV-message-error-text: black;
  --WVV-message-error-border:  #d32f2f;
  --WVV-message-error-background: rgb(255, 221, 221);
  --WVV-message-warning-text: black;
  --WVV-message-warning-border:  orange;
  --WVV-message-warning-background: rgb(255, 246, 227);
  --WVV-message-success-text: black;
  --WVV-message-success-border:  green;
  --WVV-message-success-background: rgb(231, 252, 231);
  --WVV-message-info-text: black;
  --WVV-message-info-border:  grey;
  --WVV-message-info-background: white;

  --WVV-ragred: rgb(248, 159, 159);
  --WVV-ragamber: rgb(248, 204, 123);
  --WVV-raggreen: rgb(151, 211, 151);
}