/* Shared design-token system — every surface styles through these, never hardcoded inline. */
:root {
  --color-bg: #0f1115;
  --color-bg-panel: #171a21;
  --color-fg: #f2f3f5;
  --color-fg-muted: #9aa0aa;
  --color-accent: #c8102e;
  --color-accent-hover: #e0122f;
  --color-border: #2a2e37;
  --font-body: system-ui, -apple-system, sans-serif;
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --radius: 8px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); }
a { color: var(--color-accent); }
button, .btn {
  background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md); font-size: 1rem; cursor: pointer;
}
button:hover, .btn:hover { background: var(--color-accent-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.panel { background: var(--color-bg-panel); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); }
input, textarea, select {
  background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-sm); font-family: inherit; font-size: 1rem; width: 100%;
}