/* base.css — reset, palette, typography */

:root {
  --bg: #000;
  --fg: #c0c0c0;
  --dim: #707070;
  --gold: #ffd000;
  --green: #00c060;
  --red: #e04030;
  --cyan: #40c0e0;
  --yellow: #e0c040;
  --magenta: #c060c0;
  --blue: #4060c0;
  --selected-bg: #1a1a1a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.3 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
  font-variant-ligatures: none;
}

body { padding: 8px 20px 0; min-height: 100vh; }

/* Form controls — keep them terminal-flavored */
input, select, button, textarea {
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  border: 1px solid var(--dim);
  padding: 2px 6px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--yellow); }
button {
  cursor: pointer;
  color: var(--yellow);
  font-weight: bold;
}
button:hover { background: var(--selected-bg); }
button:disabled { color: var(--dim); cursor: not-allowed; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--yellow); }

/* Suppress browser focus rings — we use color shifts instead */
*:focus-visible { outline: 1px dotted var(--yellow); outline-offset: 1px; }