/* Shared FX ZERO visual language. Semantic colours are reserved for their roles. */
:root {
  color-scheme: dark;
  --fx-bg: #090c0d;
  --fx-surface: #111719;
  --fx-surface-raised: #192125;
  --fx-text: #eef5f0;
  --fx-muted: #9baead;
  --fx-line: #354448;
  --fx-brand: #c4ff67;
  --fx-cyan: #82e9fb;
  --fx-recovery: #f477d6;
  --fx-boost: #ffad4a;
  --fx-danger: #ff655b;
  --fx-display: 'Barlow Condensed', Impact, sans-serif;
  --fx-mono: 'DM Mono', monospace;
}
.fx-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 10px 18px; border: 1px solid var(--fx-brand);
  background: var(--fx-brand); color: #101a0d; text-decoration: none;
  font: 800 16px/1 var(--fx-display); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.fx-button:hover { background: #d6ff9d; }
.fx-button:focus-visible { outline: 2px solid var(--fx-cyan); outline-offset: 3px; }
.fx-button--secondary { background: transparent; color: var(--fx-text); border-color: var(--fx-line); }
.fx-button--secondary:hover { background: var(--fx-surface-raised); }
.fx-card { background: var(--fx-surface); border: 1px solid var(--fx-line); }