@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/500.css';
@import '@fontsource/jetbrains-mono/700.css';
@import '@fontsource/big-shoulders-display/600.css';
@import '@fontsource/big-shoulders-display/800.css';

:root {
  --bg: #0a0d0b;
  --bg-panel: #0f1512;
  --bg-panel-raised: #141b17;
  --bg-inset: #070a08;
  --border: #23342b;
  --border-bright: #3a5443;
  --fg: #dbe8de;
  --fg-dim: #7a8f82;
  --fg-faint: #6f8478;
  --accent: #ffb238;
  --accent-strong: #ffd27a;
  --accent-dim: #7a5a26;
  --ok: #52e6a0;
  --ok-dim: #234a37;
  --fail: #ff5d5d;
  --fail-dim: #4a2323;
  --pending: #f0c419;
  --pending-dim: #4a4423;
  --info: #57c2ff;
  --info-dim: #234456;

  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 178, 56, 0.06), transparent),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#root {
  min-height: 100vh;
}

a {
  color: inherit;
}

button {
  font-family: var(--font-mono);
  cursor: pointer;
}

input,
select {
  font-family: var(--font-mono);
}

::selection {
  background: var(--accent-dim);
  color: var(--accent-strong);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-inset);
}
::-webkit-scrollbar-thumb {
  background: var(--border-bright);
}

.mono-num {
  font-variant-numeric: tabular-nums;
}