/* NOTE: DO NOT ADD COLORS WITHOUT EXTREMELY GOOD REASON AND DESIGN REVIEW
 * NOTE: KEEP SYNCRONIZED WITH COLORS.JS
 */
:root {
  --color-brand: #3434b2;
  --color-brand-light: #f2effe;
  --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-second: #667697;
  --color-text-dark: #303440;
  --color-text-medium: #949aab;
  --color-text-light: #84848a;
  --color-text-white: #ffffff;
  --color-text-axis: #00000070;
  --color-bg-black: #2e353b;
  --color-bg-dark: #121828;
  --color-ab-bg-dark: #101014;
  --color-primary-dark: #6C70FF;
  --color-border-dark: #FFFFFF20;
  --color-bg-card-dark: #182034;
  --color-ab-bg-card-dark: #1B1B1E;
  --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: #dcdee4;

  --color-focus: #cbe2f7;

  --footprint-color-main: #3434b2;
  --footprint-color-bg: #f7f7f9;
  --footprint-color-title: #303440;
  --footprint-color-primary-text: #303440;
  --footprint-color-secondary-text1: #666c80;
  --footprint-color-secondary-text2: #acacb2;
  --footprint-color-border: #dcdee4;
  --footprint-color-background: #fafafc;
  --footprint-color-edit-bar: #f6f6fe;
}

.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-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 {
  background-color: color-mod(var(--color-brand) blackness(12%));
}

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

/* 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);
}

.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);
}

/* 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: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) {
  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-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);
}
