/*
Gaia theme variables
*/


:root {

  /** Grey Colors
   ---------------------------------------------------------*/

  --color-alpha: #333333;
  --color-beta: #ffffff;
  --color-gamma: #4d4d4d;
  --color-delta: #5f5f5f;
  --color-epsilon: #858585;
  --color-zeta: #a6a6a6;
  --color-eta: #c7c7c7;
  --color-theta: #e7e7e7;
  --color-iota: #f4f4f4;

/** Brand Colors
 ---------------------------------------------------------*/

  --color-darkblue: #00539f;
  --color-blue: #00caf2;
  --color-turquoise: #27c8c2;
  --color-darkorange: #e66000;
  --color-orange: #ff9500;
  --color-yellow: #ffcb00;
  --color-violet: #c40c84;

  --color-warning: #fbbd3c;
  --color-destructive: #e2443a;
  --color-preffered: #00ba91;

  /** Background
   ---------------------------------------------------------*/

  --background: var(--color-beta);
  --background-plus: var(--color-theta);
  --background-minus: var(--color-zeta);

  /** Borders
   ---------------------------------------------------------*/

  --border-color: var(--color-theta);

  /** Text Color
   ---------------------------------------------------------*/

  --text-color: var(--color-gamma);
  --text-color-minus: var(--color-eta);
  --label-color: #000;

  /** Button
   ---------------------------------------------------------*/

  --button-background: var(--color-iota);

  /** Links
   ---------------------------------------------------------*/

  --link-color: var(--highlight-color);

  /** Inputs
   ---------------------------------------------------------*/

  --input-background: var(--color-beta);
  --input-color: var(--color-alpha);
  --input-clear-background: #909ca7;

  /** Buttons
   ---------------------------------------------------------*/

  --button-box-shadow:
    inset 0 -1px 0 #d8d8d8,
    inset 0 1px 0 #eeeeee;
  --button-box-shadow-active: var(--button-box-shadow);

  /** Header
   ---------------------------------------------------------*/

  --header-disabled-button-color: rgba(255,255,255,0.3);

  /** Transitions
   ---------------------------------------------------------*/

  --transition-duration: 0.2s;
}


.theme-productivity {

  /** Brand Color
   ---------------------------------------------------------*/

  --highlight-color: var(--color-orange);

  /** Header
   ---------------------------------------------------------*/

  --header-background: var(--highlight-color);
  --header-color: var(--color-beta);
}

.theme-communications {

  /** Brand Color
   ---------------------------------------------------------*/

  --highlight-color: var(--color-turquoise);

  /** Links
   ---------------------------------------------------------*/

  --link-color: #177874;

  /** Header
   ---------------------------------------------------------*/

  --header-background: var(--highlight-color);
  --header-color: var(--color-beta);
  --header-icon-color: var(--color-beta);
  --header-button-color: var(--link-color);
}

.theme-settings {

  /** Background
   ---------------------------------------------------------*/

  --background: var(--color-iota);
  --background-plus: var(--color-beta);
  --background-minus: var(--color-epsilon);
  --background-minus-minus: var(--color-zeta);

  /** Highlight
   ---------------------------------------------------------*/

  --highlight-color: var(--color-blue);

  /** Borders
   ---------------------------------------------------------*/

  --border-color: var(--color-theta);

  /** Text Color
   ---------------------------------------------------------*/

  --text-color: var(--color-gamma);

  /** Titles
   ---------------------------------------------------------*/

  --title-color: var(--background-minus);

  /** Buttons
   ---------------------------------------------------------*/

  --button-background: var(--background-plus);

  /** Switch
   ---------------------------------------------------------*/

  --switch-background: var(--background-minus-minus);

  /** Checkbox
   ---------------------------------------------------------*/

  --checkbox-border-color: var(--background-minus-minus);

  /** Header
   ---------------------------------------------------------*/

  --header-color: var(--title-color);
  --header-background: var(--background);
  --header-button-color: var(--highlight-color);
  --header-disabled-button-color: var(--color-theta);
  --header-action-button-color: var(--title-color);
}

.theme-media {

  /** Highlight Color
   ---------------------------------------------------------*/

  --highlight-color: var(--color-blue);

  /** Background
   ---------------------------------------------------------*/

  --background: var(--color-alpha);
  --background-plus: var(--color-gamma);
  --background-minus: #2B2B2B;
  --background-minus-minus: #1a1a1a;

  /** Text Color
   ---------------------------------------------------------*/

  --text-color: var(--color-beta);
  --label-color: var(--color-beta);

  /** Button
   ---------------------------------------------------------*/

  --button-background: var(--background-plus);

  /** Header
   ---------------------------------------------------------*/

  --header-background: var(--background);
  --header-icon-color: var(--text-color);
  --header-button-color: var(--highlight-color);

  /** Borders
   ---------------------------------------------------------*/

  --border-color: var(--color-gamma);

  /** Inputs
   ---------------------------------------------------------*/

  --input-background: var(--background-plus);

  /** Text Input
   ---------------------------------------------------------*/

  --text-input-background: var(--background-minus);

  /** Switch
   ---------------------------------------------------------*/

  --switch-head-border-color: var(--background-minus-minus);
  --switch-background: var(--background-minus-minus);

  /** Checkbox
   ---------------------------------------------------------*/

  --checkbox-border-color: var(--background-minus-minus);

  /** Buttons
   ---------------------------------------------------------*/

   --button-box-shadow: none;
   --button-box-shadow-active: none;
}