:root {
  --app-bg: #07111d;
  --app-surface: #0f1c2c;
  --app-surface-soft: #142438;
  --app-surface-raise: #1b2a3d;
  --app-text: #e6edf6;
  --app-muted: #92a3b8;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-navbar: #06101b;
  --app-link: #8cb8ff;
  --app-primary: #2f5be7;
  --app-primary-hover: #426cf0;
  --app-neutral-btn: #243447;
  --app-neutral-btn-hover: #30455d;
  --app-signout: #3a4758;
  --app-signout-hover: #48576c;
}

:root[data-theme="light"] {
  --app-bg: #eef2f7;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-surface-raise: #e8eef6;
  --app-text: #17212f;
  --app-muted: #627286;
  --app-border: rgba(23, 33, 47, 0.08);
  --app-navbar: #ffffff;
  --app-link: #0d6efd;
  --app-primary: #2f5be7;
  --app-primary-hover: #2449bf;
  --app-neutral-btn: #e5ebf3;
  --app-neutral-btn-hover: #d7e0eb;
  --app-signout: #d9e1ec;
  --app-signout-hover: #c9d5e4;
}

html,
body {
  min-height: 100vh;
}

body {
  background: radial-gradient(circle at top, rgba(44, 92, 168, 0.15), transparent 28%), var(--app-bg);
  color: var(--app-text);
}

a {
  color: var(--app-link);
}

.app-navbar {
  background: var(--app-navbar);
  border-color: var(--app-border) !important;
}

.navbar-brand,
.nav-link,
.app-navbar .btn {
  color: var(--app-text);
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--app-link);
}

.card,
.list-group-item,
.border,
.form-control,
.form-select,
.alert {
  border-color: var(--app-border) !important;
}

.card,
.list-group-item,
.form-control,
.form-select {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.text-secondary,
.form-text,
.small {
  color: var(--app-muted) !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
}

.btn-outline-dark,
.btn-outline-secondary {
  border-color: var(--app-border);
  color: var(--app-text);
  background-color: transparent;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--app-surface-raise);
  border-color: var(--app-surface-raise);
  color: var(--app-text);
}

[data-theme-switch]:disabled {
  opacity: 1;
  background-color: var(--app-neutral-btn);
  border-color: var(--app-neutral-btn-hover);
  color: var(--app-text);
  cursor: default;
}

.btn-dark {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: #f8fbff;
}

.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  color: #f8fbff;
}

.app-navbar .btn-warning {
  background-color: var(--app-signout);
  border-color: var(--app-signout);
  color: var(--app-text);
}

.app-navbar .btn-warning:hover,
.app-navbar .btn-warning:focus {
  background-color: var(--app-signout-hover);
  border-color: var(--app-signout-hover);
  color: var(--app-text);
}

.card {
  border: 1px solid var(--app-border);
  background-color: var(--app-surface);
}

.border.rounded,
.rounded-3 {
  background-color: var(--app-surface-soft);
}

.display-6,
.fs-4,
.fs-6,
.fw-semibold,
.h2,
.h3,
.h5 {
  color: var(--app-text);
}