/* Shared foundation: type, color tokens, controls. Panels and HUD pieces build on these. */

@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("../fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("../fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* slate surfaces, darkest to lightest */
  --edge: #0b0e11;
  --inset: #12171c;
  --panel: #1a2027;
  --panel2: #232b34;
  --raise: #2c3640;
  --line2: #2f3a45;
  --line: #4a5866;

  --ink: #eceff2;
  --dim: #a0abb6;
  --faint: #6f7b87;

  /* brass is the one accent: primary actions, the selected thing, focus */
  --accent: #e2b04a;
  --accent-ink: #1d1606;
  --accent-low: #9c7829;
  --good: #74c283;
  --bad: #e5685f;
  --warn: var(--accent);

  --coin: #e8c25a;
  --dark: #ab8ddb;
  --disc: #6fb6dd;

  --head: "Chakra Petch", "Trebuchet MS", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --r: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1318; color: var(--ink); font: 400 14px/1.4 var(--body); -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; user-select: text; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--raise); border: 2px solid var(--panel); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

.dim { color: var(--dim); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.small { font-size: 12px; }

/* the framed surface used by windows, the HUD cards, dialogue and tooltips */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 0 0 2px var(--edge), 0 10px 24px rgba(0, 0, 0, .35); }

/* ---------- buttons ---------- */
.btn { padding: 6px 14px 5px; font: 600 14px/1.2 var(--head); background: var(--panel2); border: 1px solid var(--line); border-bottom: 3px solid var(--edge); border-radius: var(--r); transition: background .1s, border-color .1s; }
.btn:hover:not(:disabled) { background: var(--raise); border-color: var(--dim); }
.btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.sm { padding: 3px 10px 2px; font-size: 13px; }
/* positive and destructive actions are told apart by color on the outline, not by filling the button */
.btn.go { color: var(--accent); border-color: var(--accent-low); }
.btn.go:hover:not(:disabled) { border-color: var(--accent); }
.btn.danger { color: var(--bad); border-color: #8a403c; }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); }

/* ---------- inputs ---------- */
.in, .sel { min-width: 0; padding: 6px 9px; font-size: 14px; background: var(--inset); border: 1px solid var(--line2); border-radius: var(--r); }
.in::placeholder { color: var(--faint); }
.in:focus, .sel:focus { outline: none; border-color: var(--accent); }
.in.num { width: 110px; }
input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); }

/* ---------- tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--line2); }
.tab { margin-bottom: -1px; padding: 7px 14px; font: 600 14px/1.2 var(--head); color: var(--dim); background: none; border: 0; border-bottom: 3px solid transparent; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- small labels ---------- */
.tier { display: inline-block; margin-right: 6px; padding: 0 6px; font: 600 11px/17px var(--head); border: 1px solid; border-radius: 2px; }
.pill { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; line-height: 17px; color: var(--dim); border: 1px solid var(--line); border-radius: 2px; }
.pill.warn { color: var(--warn); border-color: var(--accent-low); }
.pill.good { color: var(--good); border-color: #46794f; }