/*
 * layout.css — qte77 UI-branding LAYOUT (EyeRest): spacing, shape, components.
 *
 * Hand-authored structural CSS; the token values mirror ../DESIGN.md
 * (`spacing` / `rounded` / `components`) — keep them in sync. Only eyerest.css is
 * generated (by scripts/gen_ui_kit.py); this file is not.
 * Pair with eyerest.css (color) and fonts.css (type). Colors are referenced via tokens
 * only — never a raw hex here.
 */

:root {
  --space-unit: 8px;     /* keep the 8px rhythm even full-bleed */
  --container: 768px;    /* prose max-width / mobile breakpoint */
  --radius-sm: 4px;      /* inputs, chips */
  --radius-md: 6px;      /* buttons, cells */
  --radius-lg: 12px;     /* cards, panels */
}

/* Single-column, content-first. Dashboards may go full-bleed but keep the rhythm. */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: calc(2 * var(--space-unit));
}

/* ---------- Components (compose tokens; recolour wholesale on theme/variant flip) ---------- */
.btn-primary {
  background: var(--primary);
  color: var(--primary-on);
  border: 0;
  border-radius: var(--radius-md);
  padding: 6px 16px;
  font: inherit;
  cursor: pointer;
}
.card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: calc(2 * var(--space-unit));
}
.input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}
code, kbd, samp, pre {
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.caption { color: var(--text-muted); }
.divider { background: var(--border); height: 1px; border: 0; }
/* Soft, not round. No pills except removable filter chips. */
.chip { border-radius: var(--radius-sm); }
.chip--removable { border-radius: 999px; }