:root {
  --hb-bg: #08090b;
  --hb-surface: #101319;
  --hb-surface-2: #151922;
  --hb-line: #2a3039;
  --hb-text: #f2f5f8;
  --hb-muted: #9aa4b2;
  --hb-dim: #67707d;
  --hb-accent: #ff6b6b;
  --hb-accent-2: #7dd3fc;
  --hb-ok: #6ee7b7;
  --hb-warn: #facc15;
  --hb-radius: 7px;
  color-scheme: dark;
}

html,
body {
  background: var(--hb-bg);
  color: var(--hb-text);
}

body {
  letter-spacing: 0;
}

a {
  color: inherit;
}

button,
.btn,
a.btn,
input,
select,
textarea {
  border-radius: var(--hb-radius);
}

button,
.btn,
a.btn {
  border: 1px solid var(--hb-line);
  background: #12151b;
  color: var(--hb-muted);
  min-height: 34px;
  padding: .42rem .58rem;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.btn:hover,
a.btn:hover,
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible {
  border-color: color-mix(in srgb, var(--hb-accent-2) 55%, transparent);
  color: #fff;
  outline: none;
}

input,
select,
textarea {
  border: 1px solid var(--hb-line);
  background: #08090b;
  color: var(--hb-text);
}

.hot,
.primary,
[data-primary="true"] {
  border-color: color-mix(in srgb, var(--hb-accent) 45%, transparent) !important;
  color: #fff !important;
}

.card,
.tile,
.panel,
.pane,
.board,
.sheet,
.modal {
  border-color: var(--hb-line);
  background-color: var(--hb-surface);
}

.muted,
.sub,
.meta,
.status {
  color: var(--hb-muted);
}

.ok {
  color: var(--hb-ok);
}

.bad,
.error {
  color: var(--hb-accent);
}

.mono {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

header,
.topbar,
.toolbar,
.tabs {
  border-color: var(--hb-line);
  background: rgba(12, 14, 18, .96);
}

::selection {
  background: rgba(125, 211, 252, .28);
}