/* Andre OS v2 design contract. Individual tabs own their layout and data, but
   share these tokens and interaction primitives so the dashboard reads as one
   product. Keep selectors deliberately low-specificity to preserve tab logic. */
:root {
  --ao-bg: #f4f2e9;
  --ao-surface: #fff;
  --ao-border: #d9d7cf;
  --ao-ink: #122019;
  --ao-muted: #637066;
  --ao-green: #0f3d2e;
  --ao-danger: #bd3e34;
  --ao-radius: 8px;
  --ao-control-height: 34px;
}
body[data-dashboard-tab] { background: var(--ao-bg); color: var(--ao-ink); }
body[data-dashboard-tab] :where(button, input, select, textarea) { font: inherit; }
body[data-dashboard-tab] :where(button, [role="button"]) { min-height: 30px; }
body[data-dashboard-tab] :where(input, select, textarea) { border-color: var(--ao-border); }
body[data-dashboard-tab] :where(a) { color: inherit; }
body[data-dashboard-tab] :where(button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible) { outline: 3px solid rgba(15,61,46,.24); outline-offset: 2px; }
@media (max-width:720px) {
  body[data-dashboard-tab] :where(button, input, select) { min-height: 38px; }
}