/* BMK FF Tools shared theme — palette from shared/design-spec.md (Codex, gpt-6-astra) */
:root {
  color-scheme: light;
  --background: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #EAECE8;
  --border: #C9CECA;
  --text: #202C30;
  --text-muted: #58666B;
  --accent: #24686C;
  --accent-2: #8A5B2B;
  --warn: #8A5B08;
  --danger: #AD3935;
  --balsa-wood: #D9B883;
  --spar-wood: #A67A45;
  --skin-tissue: #E7D7AF52;
  --grid: #52676B24;
  --on-accent: #F4F3EF;
  --shadow: 0 1px 2px #0000000f, 0 4px 16px #0000000a;
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #171E22; --surface: #20292E; --surface-2: #29353B; --border: #46555D;
    --text: #EBEFEB; --text-muted: #AAB9BC; --accent: #89C0BE; --accent-2: #D5AD76;
    --warn: #E1B866; --danger: #EE948C; --balsa-wood: #CDA975; --spar-wood: #AB8251;
    --skin-tissue: #E1D0A647; --grid: #A2B8C024; --on-accent: #171E22;
    --shadow: 0 1px 2px #0000004d, 0 4px 16px #00000040;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #171E22; --surface: #20292E; --surface-2: #29353B; --border: #46555D;
  --text: #EBEFEB; --text-muted: #AAB9BC; --accent: #89C0BE; --accent-2: #D5AD76;
  --warn: #E1B866; --danger: #EE948C; --balsa-wood: #CDA975; --spar-wood: #AB8251;
  --skin-tissue: #E1D0A647; --grid: #A2B8C024; --on-accent: #171E22;
  --shadow: 0 1px 2px #0000004d, 0 4px 16px #00000040;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--background); color: var(--text); font: 14px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
.mono, input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: 500 13px/1 var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn svg { width: 16px; height: 16px; }