:root {
  --color-neutral-white: #FFFFFF;
  --color-neutral-light: #D6DFE5;
  --color-neutral-mid: #A6B3BC;
  --color-neutral-dark: #7B7B7C;

  --color-blue-navy: #112A41;
  --color-blue-graphite: #385066;
  --color-blue-slate: #283D4C;
  --color-blue-mid: #386A86;

  --color-accent: #FCCE55;
  --color-accent-dark: #DAB243;
}

body {
  background: linear-gradient(135deg, var(--color-blue-navy) 0%, var(--color-blue-slate) 65%, var(--color-blue-navy) 100%);
  color: var(--color-blue-navy);
  font-family: inherit;
}

.brand-card,
.brand-section {
  background-color: var(--color-neutral-white) !important;
  border: 1px solid var(--color-neutral-light) !important;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(17, 42, 65, 0.15);
  color: var(--color-blue-mid);
}

.brand-topbar {
  background-color: var(--color-blue-navy) !important;
  color: #fff;
}

.brand-topbar a {
  color: #fff;
}

.brand-table-header th {
  background-color: var(--color-neutral-light) !important;
  color: var(--color-blue-navy);
  border-bottom: 1px solid var(--color-neutral-mid);
}
.brand-table-header th,
.brand-table-header th * {
  color: var(--color-blue-navy) !important;
}

.brand-btn {
  background-color: var(--color-accent) !important;
  color: var(--color-blue-navy);
  border: 1px solid var(--color-accent-dark);
  box-shadow: 0 10px 20px rgba(17, 42, 65, 0.25);
}

.brand-btn.secondary {
  background-color: var(--color-blue-mid) !important;
  color: #fff;
  border-color: var(--color-blue-graphite);
}

.brand-btn.danger {
  background-color: var(--color-accent-dark) !important;
  color: var(--color-blue-navy);
  border-color: var(--color-accent-dark);
}

.brand-input,
.brand-select {
  background-color: var(--color-neutral-white) !important;
  border: 1px solid var(--color-neutral-mid) !important;
  color: #0a0a0a;
}

.brand-input::placeholder,
.brand-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: #0a0a0a !important;
}

.brand-login-text,
.brand-login-text * {
  color: var(--color-blue-navy) !important;
}

.brand-alert {
  background-color: var(--color-neutral-light);
  border-color: var(--color-neutral-mid);
  color: var(--color-blue-slate);
}

.brand-topbar .brand-btn {
  box-shadow: none;
}

.brand-table {
  border-color: var(--color-neutral-light);
}

@media (max-width: 640px) {
  body {
    background: var(--color-blue-slate);
  }
}