/*
 * HDL-App chrome primitives (.ui-*).
 * Theme tokens: --c-* (chrome). Tabulator uses --t-* — do not mix.
 * See .cursor/rules/ui.mdc and theming.mdc.
 *
 * Wire into the Rails asset pipeline / Tailwind entry once the app is generated.
 */

:root {
  --c-bg: #f6f7f9;
  --c-surface: #ffffff;
  --c-text: #1a1d23;
  --c-text-muted: #5c6570;
  --c-border: #d8dde3;
  --c-accent: #1f6b4a;
  --c-accent-contrast: #ffffff;
  --c-danger: #b42318;
}

[data-theme="dark"] {
  --c-bg: #12151a;
  --c-surface: #1c2128;
  --c-text: #e8ecf1;
  --c-text-muted: #9aa3ad;
  --c-border: #2e3640;
  --c-accent: #3d9b6e;
  --c-accent-contrast: #0b1210;
  --c-danger: #f97066;
}

.ui-btn {
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.25;
}

.ui-btn--sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
}

.ui-btn--md {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

.ui-btn--lg {
  padding: 0.625rem 1.125rem;
  font-size: 1rem;
}

.ui-btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}

.ui-btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}

.ui-btn--danger {
  background: var(--c-danger);
  color: #fff;
}

.ui-btn--ghost {
  background: transparent;
  color: var(--c-text);
  border-color: transparent;
}