/* KelOS cyberpunk theme */
:root {
  color-scheme: dark;
  --kelos-bg: #080d17;
  --kelos-surface: #101827;
  --kelos-surface-raised: #151f31;
  --kelos-border: #2a3a52;
  --kelos-text: #e5f0ff;
  --kelos-muted: #9aabc2;
  --kelos-cyan: #68f7e6;
  --kelos-magenta: #ff62d4;
  --bs-body-color: var(--kelos-text);
  --bs-body-bg: var(--kelos-bg);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--kelos-muted);
  --bs-tertiary-color: #7789a3;
  --bs-border-color: var(--kelos-border);
  --bs-primary: var(--kelos-cyan);
  --bs-link-color: var(--kelos-cyan);
  --bs-link-hover-color: var(--kelos-magenta);
  --bs-code-color: var(--kelos-magenta);
  --bs-card-bg: var(--kelos-surface);
  --bs-card-border-color: var(--kelos-border);
  --bs-table-color: var(--kelos-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--kelos-border);
  --bs-table-striped-color: var(--kelos-text);
  --bs-table-striped-bg: rgb(104 247 230 / 3%);
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: rgb(104 247 230 / 7%);
}

html { background: var(--kelos-bg); }

body {
  min-height: 100vh;
  color: var(--kelos-text);
  background:
    radial-gradient(ellipse at 12% 0%, rgb(28 115 132 / 15%), transparent 38rem),
    radial-gradient(ellipse at 92% 12%, rgb(133 41 121 / 12%), transparent 34rem),
    var(--kelos-bg);
  font-family: "Departure Mono", "Commit Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
  line-height: 1.6;
}

::selection { color: #07121b; background: var(--kelos-cyan); }

a {
  text-decoration-color: rgb(104 247 230 / 45%);
  text-underline-offset: .18em;
}

a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4, h5, h6 {
  color: #f4f8ff;
  letter-spacing: -.035em;
  text-wrap: balance;
}

h1 {
  margin-bottom: 1rem;
  color: var(--kelos-cyan);
  text-shadow: 0 0 1.1rem rgb(104 247 230 / 15%);
}

.navbar {
  --bs-navbar-color: #c7d5e8;
  --bs-navbar-hover-color: var(--kelos-cyan);
  --bs-navbar-active-color: var(--kelos-cyan);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: var(--kelos-cyan);
  --bs-navbar-toggler-border-color: var(--kelos-border);
  background: rgb(10 16 28 / 94%) !important;
  border-bottom: 1px solid var(--kelos-border);
  box-shadow: 0 .4rem 1.5rem rgb(0 0 0 / 24%), 0 1px 0 rgb(104 247 230 / 7%);
  backdrop-filter: blur(12px);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.navbar-toggler-icon { filter: invert(1) hue-rotate(125deg) saturate(2); }

.container { padding-bottom: 2rem; }

.card, .list-group-item, .dropdown-menu, .modal-content {
  color: var(--kelos-text);
  background-color: var(--kelos-surface);
  border-color: var(--kelos-border);
}

.card { box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 18%); }

.card-header, .card-footer {
  color: var(--kelos-text);
  background-color: var(--kelos-surface-raised);
  border-color: var(--kelos-border);
}

.table {
  --bs-table-color: var(--kelos-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--kelos-border);
  --bs-table-striped-color: var(--kelos-text);
  --bs-table-striped-bg: rgb(104 247 230 / 3%);
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: rgb(104 247 230 / 7%);
}

.table thead th {
  color: var(--kelos-cyan);
  border-bottom-color: var(--kelos-cyan);
  font-size: .82em;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.form-control, .form-select, .input-group-text {
  color: var(--kelos-text);
  background-color: #0c1422;
  border-color: var(--kelos-border);
}

.form-control::placeholder { color: #8394ad; opacity: 1; }

.form-control:focus, .form-select:focus {
  color: #fff;
  background-color: #0c1422;
  border-color: var(--kelos-cyan);
  box-shadow: 0 0 0 .2rem rgb(104 247 230 / 16%);
}

.form-check-input { background-color: #0c1422; border-color: #71839e; }

.form-check-input:checked {
  background-color: #19b9b0;
  border-color: var(--kelos-cyan);
}

.btn { border-radius: .35rem; font-weight: 600; letter-spacing: .015em; }

.btn-primary {
  --bs-btn-color: #07121b;
  --bs-btn-bg: #55e9da;
  --bs-btn-border-color: #55e9da;
  --bs-btn-hover-color: #07121b;
  --bs-btn-hover-bg: #8bfff1;
  --bs-btn-hover-border-color: #8bfff1;
  --bs-btn-active-color: #07121b;
  --bs-btn-active-bg: #43d7c9;
  --bs-btn-active-border-color: #43d7c9;
}

.btn-outline-primary {
  --bs-btn-color: var(--kelos-cyan);
  --bs-btn-border-color: #36bfb7;
  --bs-btn-hover-color: #07121b;
  --bs-btn-hover-bg: var(--kelos-cyan);
  --bs-btn-hover-border-color: var(--kelos-cyan);
}

.btn-outline-secondary, .btn-secondary {
  --bs-btn-color: #d3deed;
  --bs-btn-bg: #27354a;
  --bs-btn-border-color: #50627b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #354760;
  --bs-btn-hover-border-color: #8092ac;
}

.btn-danger, .btn-outline-danger {
  --bs-btn-bg: #dc3b8a;
  --bs-btn-border-color: #ff62a8;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #f04b9b;
  --bs-btn-hover-border-color: #ff8abc;
  --bs-btn-hover-color: #fff;
}

.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kelos-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 .22rem rgb(104 247 230 / 18%);
}

.alert {
  color: var(--kelos-text);
  background-color: var(--kelos-surface-raised);
  border-color: var(--kelos-border);
}

.alert-info { color: #c5f8f7; background-color: #102a37; border-color: #286276; }
.alert-success { color: #c9ffe9; background-color: #10352d; border-color: #28765c; }
.alert-warning { color: #fff0c2; background-color: #352b16; border-color: #8a6a2a; }
.alert-danger, .alert-error { color: #ffd4e4; background-color: #39192c; border-color: #8b365e; }

.badge.bg-primary, .badge.bg-success {
  color: #07121b;
  background-color: var(--kelos-cyan) !important;
}

.badge.bg-secondary { color: #e5f0ff; background-color: #42536b !important; }
.badge.bg-danger { background-color: #dc3b8a !important; }
.text-body-secondary, .text-muted { color: var(--kelos-muted) !important; }

.toast {
  color: var(--kelos-text);
  background-color: #122132;
  border: 1px solid var(--kelos-cyan);
  box-shadow: 0 .5rem 2rem rgb(0 0 0 / 40%), 0 0 1.2rem rgb(104 247 230 / 12%);
}

.toast .btn-close { filter: invert(1); }
pre, code, kbd, samp { color: #aaf9f0; }

pre {
  padding: .85rem;
  overflow: auto;
  background-color: #0b1320;
  border-color: var(--kelos-border) !important;
  border-radius: .35rem;
}

hr { color: var(--kelos-border); opacity: 1; }
.alert-debug { color: #07121b; background-color: #e5f0ff; border-color: #b6c9df; }

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .card, .form-control, .form-select {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
}