:root {
  --font-family: 'Roboto';

  --margin-percentage: 10%;

  --green-100: #ecf8de;
  --green-500: #7ed321;
  --orange-100: #fde9e3;
  --orange-500: #f16a43;
  --red-800: #dd0000;

  /*Base*/
  --white: #ffffff;
  --grey-100: #f3f3f3;
  --grey-200: #dddddd;
  --grey-300: #d8d8d9;
  --grey-400: #999999;
  --grey-500: #909092;
  --grey-600: #666666;
  --grey-800: #333333;
  --grey-900: #212121;
  --black: #000000;

  /*Info*/
  --sea-green-100: #e0efef;
  --sea-green-500: #2e9394;
  --yellow-100: #fef9e8;
  --yellow-500: #f7d968;
  --orange-100: #fde9e3;
  --orange-500: #f16a43;

  /*Adjustable*/
  /*Handball*/
  --red-100: #fad9d9;
  --red-500: #ea214b;
  --purple-100: #f1dfe9;
  --purple-500: #a1276a;

  /*Waterpolo*/
  --blue-100: #dde9f6;
  --blue-500: #007aff;
  --blue-800: #2f394d;
  --warmred-500: #f0544f;

  /*Heading*/
  --text-heading-color: var(
    --purple-500
  ); /*Main theme - Change this one accordingly*/

  /*Brand*/

  /*Semantic color variables*/
  /*Text*/
  --text-primary-color: var(--grey-900);
  --text-secondary-color: var(--white);
  --text-tertiary-color: var(--grey-500);
  --text-inverted-color: var(--white);
  --text-error-color: var(--orange-500);

  /*Interactions*/
  --approval-color: var(--green-500);
  --disabled-light-color: var(--grey-200);
  --disabled-dark-color: var(--grey-500);
  --interaction-link-primary-color: var(
    --red-500
  ); /*Main theme - Change this one accordingly*/
  --interaction-link-selected-color: var(
    --red-100
  ); /*Main theme - Change this one accordingly*/
  --link-selected-tab: var(--purple-500);
  --link-inverted-color: var(--white);
  --selected-item: var(--grey-200);
  --disabled-dark-color: var(--grey-500);
  --link-secondary-color: var(--grey-900);

  /*Borders*/
  --border-color: var(--red-500);
  --border-validation-error-color: var(--orange-500);
  --border-white-colour: var(--white);
  --divider-line-light-color: var(--grey-300);
  --divider-line-dark-color: var(--grey-500);
  --border-dark-color: var(--grey-500);
  --border-selected-color: var(--grey-900);

  /*Icons*/
  --icon-selected-bg-color: var(--red-100);
  --icon-primary-color: var(
    --red-500
  ); /*Main theme - Change this one accordingly*/
  --icon-inverted-color-white: var(--white);
  --icon-push-area-bg-colour: var(--grey-200);
  --icon-disabled-light-color: var(--grey-200);
  --icon-disabled-dark-color: var(--grey-500);
  --icon-secondary-color: var(--grey-900);

  /*Success*/
  --info-success-bg-color: var(--green-100);
  --info-success-primary-color: var(--green-500);

  /*Warning*/
  --info-warning-bg-color: var(--orange-100);
  --info-warning-primary-color: var(--orange-500);

  /*Error*/
  --info-error-bg-color: var(--red-100);
  --info-error-primary-color: var(--red-800);

  /*Neutral*/
  --info-neutral-bg-color: var(--sea-green-100);
  --info-neutral-primary-color: var(--sea-green-500);

  /*Avatars*/
  --avatar-red-color-red-800: var(--red-800);
  --avatar-red-bg-color-red-100: var(--red-100);
  --avatar-purple-color-purple-500: var(--purple-500);
  --avatar-purple-bg-color-purple-100: var(--purple-100);
  --avatar-orange-color-orange-500: var(--orange-500);
  --avatar-orange-bg-color-orange-100: var(--orange-100);
  --avatar-yellow-colour-yellow-500: var(--yellow-500);
  --avatar-yellow-bg-color-yellow-100: var(--yellow-100);
  --avatar-sea-green-color-sea-green-500: var(--sea-green-500);
  --avatar-sea-green-bg-color-sea-green-100: var(--sea-green-100);
  --avatar-green-color-green-500: var(--green-500);
  --avatar-green-bg-color-green-100: var(--green-100);

  /*Backgrounds*/
  --bg-light-grey-color: var(--grey-100);
  --bg-white-color-white: var(--white);

  /*Top bar*/
  --top-bar-gradient-1-colour: var(--purple-500);
  --top-bar-gradient-2-colour: var(--red-500);
  --top-bar-gradient-3-colour: var(--orange-500);
  --top-bar-gradient-4-colour: var(--yellow-500);

  --gradient: 225deg, var(--top-bar-gradient-4-colour) 0%,
    var(--top-bar-gradient-3-colour) 33.33%,
    var(--top-bar-gradient-2-colour) 66.67%,
    var(--top-bar-gradient-1-colour) 100%;
  --top-bar-colour: var(--gradient);

  @media (max-width: 1200px) {
    --margin-percentage: 4%;
  }
}