:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --navy: #d6e9f2;
    --navy-2: #e7f2f7;
    --blue: #65b8e6;
    --sky: #173141;
    --ink: #e7f0f4;
    --muted: #a5b7c1;
    --line: #304653;
    --white: #13232d;
    --red: #d56d76;
    --shadow: 0 16px 45px rgba(0, 0, 0, .25);
  }

  body {
    background: #0b171f;
  }

  .logo {
    content: url("assets/eot-logo-white.png");
    left: -46px;
    transform: scale(1.65);
  }

  .masthead,
  footer,
  .card,
  .list-item {
    background: var(--white);
    border-color: var(--line);
  }

  input {
    color: var(--ink);
    background: #0f202a;
    border-color: #48616f;
  }

  input:disabled {
    color: var(--muted);
    background: #172a35;
  }

  .login-card p,
  .login-copy > p:not(.eyebrow),
  .list-item p {
    color: var(--muted);
  }

  .login-card .primary {
    color: #fff;
    background: #176b98;
  }

  .login-card .primary:disabled {
    color: #dbe7ed;
    background: #304b5a;
    opacity: 1;
  }

  body.account-active {
    --a-bg: #0b171f;
    --a-panel: #13232d;
    --a-field: #0f202a;
    --a-nav: #172a35;
    --a-line: #304653;
    --a-control: #48616f;
    --a-text: #e7f0f4;
    --a-muted: #a5b7c1;
    --a-blue: #65b8e6;
    --a-pale: #17384b;
    --a-orange: #ff7a32;
    --a-danger: #7f303a;
    --a-danger-line: #a9535d;
    --a-danger-fill: #3a2026;
  }

  .secure-pill {
    color: #99dbb5;
    background: #183428;
    border-color: #356249;
  }

  #accountsView .tabs button.active {
    border-color: #477f9f;
  }

  .account-content > .status:not(:empty) {
    border-color: #477f9f;
  }

  #accountsView .secondary,
  #accountsView .tag {
    border-color: #477f9f;
  }

  #accountsView .card,
  #accountsView .list-item {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  }

  .pro-signup {
    background: linear-gradient(135deg, #176b98, #2496c8);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
  }
}