/* NOTE: DO NOT ADD COLORS WITHOUT EXTREMELY GOOD REASON AND DESIGN REVIEW
 * NOTE: KEEP SYNCRONIZED WITH COLORS.JS
 */
:root {
  --color-brand: #509ee3;
  --color-brand-light: #ddecfa;
  --color-accent1: #88bf4d;
  --color-accent2: #a989c5;
  --color-accent3: #ef8c8c;
  --color-accent4: #f9d45c;
  --color-accent5: #f2a86f;
  --color-accent6: #98d9d9;
  --color-accent7: #7172ad;
  --color-admin-navbar: #7172ad;
  --color-white: #ffffff;
  --color-black: #2e353b;
  --color-success: #84bb4c;
  --color-error: #ed6e6e;
  --color-warning: #f9cf48;
  --color-text-dark: #2e353b;
  --color-text-medium: #74838f;
  --color-text-light: #c7cfd4;
  --color-text-white: #ffffff;
  --color-bg-black: #2e353b;
  --color-bg-dark: #93a1ab;
  --color-bg-medium: #edf2f5;
  --color-bg-light: #f9fbfc;
  --color-bg-white: #ffffff;
  --color-bg-yellow: #fffcf2;
  --color-shadow: rgba(0, 0, 0, 0.13);
  --color-border: #f0f0f0;

  /* Saturated colors for the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */
  --color-saturated-blue: #2d86d4;
  --color-saturated-green: #70a63a;
  --color-saturated-purple: #885ab1;
  --color-saturated-red: #ed6e6e;
  --color-saturated-yellow: #f9cf48;

  /* night mode colors */
  --night-mode-color: color(var(--color-text-white) alpha(-14%));
  --night-mode-card: #42484e;
}

/* NOTE: DEPRECATED, replaced with colors above
:root {
  --brand-color: var(--color-brand);
  --brand-light-color: var(--color-text-light);
  --brand-saturated-color: var(--color-brand);

  --base-grey: var(--color-bg-light);
  --grey-5percent: var(--color-bg-medium);
  --grey-1: var(--color-text-light);
  --grey-2: var(--color-text-light);
  --grey-3: var(--color-text-medium);
  --grey-4: var(--color-text-medium);
  --grey-5: var(--color-text-medium);

  --grey-text-color: var(--color-text-medium);
  --alt-color: var(--color-bg-light);
  --alt-bg-color: var(--color-bg-light);

  --success-color: var(--color-success);
  --headsup-color: var(--color-warning);

  --gold-color: var(--color-accent4);
  --orange-color: var(--color-warning);
  --purple-color: var(--color-accent2);
  --green-color: var(--color-accent1);
  --green-saturated-color: var(--color-accent1);
  --dark-color: var(--color-text-dark);
  --slate-color: var(--color-text-medium);
  --slate-light-color: var(--color-text-light);
  --slate-almost-extra-light-color: var(--color-bg-medium);
  --slate-extra-light-color: var(--color-bg-light);

  --error-color: var(--color-error);

  --metric-color: var(--color-accent1);
  --segment-color: var(--color-accent2);
  --pulse-color: var(--color-accent4);
  --dashboard-color: var(--color-brand);
  --data-color: var(--color-accent1);
  --question-color: var(--color-text-medium);
}
*/

.text-default,
:local(.text-default) {
  color: var(--color-text-dark);
}

.text-default-hover:hover {
  color: var(--color-text-dark);
}

/* brand */
.text-brand,
:local(.text-brand),
.text-brand-hover:hover,
:local(.text-brand-hover):hover {
  color: var(--color-brand);
}

.text-brand-darken,
.text-brand-darken-hover:hover {
  color: var(--color-brand);
}

.text-brand-light,
:local(.text-brand-light),
.text-brand-light-hover:hover,
:local(.text-brand-light-hover):hover {
  color: var(--color-brand-light);
}

.bg-brand-light {
  background-color: var(--color-brand-light);
}

.bg-brand-dark,
.bg-brand-dark-hover:hover {
  background-color: color(var(--color-brand) blackness(+12%));
}

.bg-brand-dark,
.bg-brand-dark-hover:hover {
  background-color: color(var(--color-brand) blackness(+12%));
}

.bg-brand-dark,
.bg-brand-dark-hover:hover {
  background-color: color(var(--color-brand) blackness(+12%));
}

.bg-brand,
.bg-brand-hover:hover,
.bg-brand-active:active {
  background-color: var(--color-brand);
}

@media screen and (--breakpoint-min-md) {
  .md-bg-brand {
    background-color: var(--color-brand) !important;
  }
}

/* success */

.text-success {
  color: var(--color-success);
}
.bg-success {
  background-color: var(--color-success);
}

/* error */

.text-error,
:local(.text-error),
.text-error-hover:hover {
  color: var(--color-error);
}

.bg-error,
.bg-error-hover:hover {
  background-color: var(--color-error);
}
.bg-error-input {
  background-color: var(--color-bg-white);
}

/* favorite */
.text-gold,
.text-gold-hover:hover {
  color: var(--color-accent4);
}

.text-purple,
.text-purple-hover:hover {
  color: var(--color-accent7);
}

.text-green,
.text-green-hover:hover {
  color: var(--color-accent1);
}

.text-green-saturated,
.text-green-saturated-hover:hover {
  color: var(--color-accent1);
}

.text-orange,
.text-orange-hover:hover {
  color: var(--color-warning);
}

.text-slate {
  color: var(--color-text-medium);
}
.text-slate-light {
  color: var(--color-text-light);
}
.text-slate-extra-light {
  background-color: var(--color-bg-light);
}

.bg-gold {
  background-color: var(--color-accent4);
}

.bg-purple,
.bg-purple-hover:hover {
  background-color: var(--color-accent2);
}

.bg-green {
  background-color: var(--color-accent1);
}
.bg-green-saturated,
.bg-green-saturated-hover:hover {
  background-color: var(--color-accent1);
}

/* alt */
.bg-alt,
.bg-alt-hover:hover {
  background-color: var(--color-bg-light);
}

.text-light,
:local(.text-light),
.text-light-hover:hover {
  color: var(--color-text-light);
}

.text-medium,
:local(.text-medium),
.text-medium-hover:hover {
  color: var(--color-text-medium);
}

.text-dark,
:local(.text-dark),
.text-dark-hover {
  color: var(--color-text-dark);
}

.bg-light,
.bg-light-hover:hover {
  background-color: var(--color-bg-light);
}

.bg-medium,
.bg-medium-hover:hover {
  background-color: var(--color-bg-medium);
}

.bg-dark,
.bg-dark-hover:hover {
  background-color: var(--color-bg-dark);
}

.bg-black,
.bg-black-hover:hover {
  background-color: var(--color-bg-black);
}

/* white  - move to bottom for specificity since its often used on hovers, etc */
.text-white,
:local(.text-white),
.text-white-hover:hover {
  color: var(--color-text-white);
}

@media screen and (--breakpoint-min-md) {
  .md-text-white {
    color: var(--color-text-white);
  }
}

/* common pattern, background brand, text white when hovering or selected */
.brand-hover:hover {
  color: var(--color-text-white);
  background-color: var(--color-brand);
}
.brand-hover:hover * {
  color: var(--color-text-white);
}

.bg-white,
:local(.bg-white),
.bg-white-hover:hover {
  background-color: var(--color-bg-white);
}

.bg-light-blue {
  background-color: var(--color-bg-light);
}

.bg-light-blue-hover:hover {
  background-color: var(--color-bg-medium);
}

.text-light-blue,
.text-light-blue-hover:hover {
  color: var(--color-text-light);
}
.text-slate {
  color: var(--color-text-medium);
}

.bg-transparent {
  background-color: transparent;
}

/* entity colors */

.bg-metric {
  background-color: var(--color-accent1);
}
.text-metric {
  color: var(--color-accent1);
}

.bg-data {
  background-color: var(--color-accent1);
}
.text-data {
  color: var(--color-accent1);
}

.bg-segment {
  background-color: var(--color-accent2);
}
.text-segment {
  color: var(--color-accent2);
}

.bg-dashboard {
  background-color: var(--color-brand);
}
.text-dashboard {
  color: var(--color-brand);
}

.bg-pulse {
  background-color: var(--color-accent4);
}
.text-pulse {
  color: var(--color-accent4);
}

.bg-question {
  background-color: var(--color-bg-dark);
}
.text-question {
  color: var(--color-text-medium);
}

.text-light {
  color: var(--color-text-light);
}
.text-medium {
  color: var(--color-text-medium);
}
.text-dark {
  color: var(--color-text-dark);
}
