/* Color vars */
:root {
  --color-0: #1f0a30;
  --color-1: #182c5b;
  --color-2: #547788;
  --color-3: #d0e0d9;
  --color-4: #fff;

  --color-a: #f9f9f9;
  --color-b: #182c5b;
  --color-c: #b32a34;
  --color-d: #a2bfe8;
  --color-e: #1481ba;
}

/* Light scheme */

:root {
  --color-bg-primary: var(--color-4);
  --color-bg-secondary: var(--color-3);

  --color-text-primary: var(--color-2);
  --color-text-secondary: var(--color-1);
  --color-accent: var(--color-c);
}

.scheme-flip {
  --color-bg-primary: var(--color-1);
  --color-bg-secondary: var(--color-2);

  --color-text-primary: var(--color-3);
  --color-text-secondary: var(--color-4);
  --color-accent: var(--color-c);
}

/* Dark scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: var(--color-1);
    --color-bg-secondary: var(--color-2);

    --color-text-primary: var(--color-3);
    --color-text-secondary: var(--color-4);
    --color-accent: var(--color-c);
  }

  .scheme-flip {
    --color-bg-primary: var(--color-4);
    --color-bg-secondary: var(--color-3);

    --color-text-primary: var(--color-2);
    --color-text-secondary: var(--color-1);
    --color-accent: var(--color-c);
  }
}

/* Apply defaults */
:root {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* Helpers */

.primary {
  color: var(--color-text-primary);
}

.secondary {
  color: var(--color-text-secondary);
}

.accent {
  color: var(--color-text-accent);
}

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

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

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

.b--primary {
  border-color: var(--color-text-primary);
}

.b--secondary {
  border-color: var(--color-text-secondary);
}

.b--accent {
  border-color: var(--color-accent);
}