:root {
  --primary: #20a8d8;
  --secondary: #515b65;
  --danger: #f86c6b;
  --warn: #f8a41a;
  --success: #4dbd74;

  --primary-lighter: color-mix(in srgb, var(--primary), white 60%);
  --secondary-lighter: color-mix(in srgb, var(--secondary), white 60%);
  --danger-lighter: color-mix(in srgb, var(--danger), white 60%);
  --warn-lighter: color-mix(in srgb, var(--warn), white 60%);
  --success-lighter: color-mix(in srgb, var(--success), white 60%);

  --primary-darker: color-mix(in srgb, var(--primary), black 60%);
  --secondary-darker: color-mix(in srgb, var(--secondary), black 60%);
  --danger-darker: color-mix(in srgb, var(--danger), black 60%);
  --warn-darker: color-mix(in srgb, var(--warn), black 60%);
  --success-darker: color-mix(in srgb, var(--success), black 60%);

  --text-color: #e9e9e9;

  --fixed-popup-glass-background: #00000080;
  --grey: #2e353a;
  --grey-transparent: #2e353af2;
  --dark-grey: #212427;
  --extra-dark-grey: #0f1114;
  --disabled: #6b6b6b;
  --disabled-input-background: #1e1e1e;
}