/*
 * AEC Buddy base: element defaults and the shared components (buttons, badges, cards, empty states, spinner), built only from design/tokens.css. Every page loads it after the
 * tokens and before its own styles. It sets no page layout: how body and the app frame are sized stays with each page.
 */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ab-font);
  color: var(--ab-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--ab-font-display); letter-spacing: var(--ab-tracking-tight); }
a { color: var(--ab-text-link); text-underline-offset: 2px; }
a:hover { color: var(--ab-accent-hover); }
code, kbd, samp, pre { font-family: var(--ab-mono); }
::selection { background: var(--ab-brand-100); }
[hidden] { display: none !important; }

/* One focus ring for everything that takes the keyboard. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ab-focus-color);
  outline-offset: 2px;
}

/* Thin, quiet scrollbars inside panels. */
* { scrollbar-width: thin; scrollbar-color: var(--ab-neutral-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ab-neutral-300); border-radius: var(--ab-r-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--ab-neutral-400); }

.ab-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Brand lockup: Otsara is the family, AEC Buddy the product ("OTSARA  AEC Buddy") ── */
.brand-lockup { display: inline-flex; align-items: baseline; gap: var(--ab-space-2); min-width: 0; white-space: nowrap; }
.brand-family { font-size: var(--ab-fs-2xs); font-weight: var(--ab-fw-medium); letter-spacing: .16em; text-transform: uppercase; color: var(--ab-text-muted); }
.brand-product { font-weight: var(--ab-fw-semibold); letter-spacing: var(--ab-tracking-tight); color: var(--ab-text-primary); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ab-space-2);
  min-height: var(--ab-control-h); padding: 0 var(--ab-space-4);
  border: 1px solid var(--ab-border-strong); border-radius: var(--ab-r-sm);
  background: var(--ab-surface); color: var(--ab-text-primary);
  font-size: var(--ab-fs-sm); font-weight: var(--ab-fw-medium); line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background var(--ab-dur-fast) var(--ab-ease), border-color var(--ab-dur-fast) var(--ab-ease), color var(--ab-dur-fast) var(--ab-ease);
}
.ab-btn:hover:not(:disabled) { background: var(--ab-surface-hover); border-color: var(--ab-neutral-400); }
.ab-btn:active:not(:disabled) { background: var(--ab-surface-sunken); }
.ab-btn:disabled { cursor: default; opacity: .55; }
.ab-btn--primary { background: var(--ab-accent); border-color: var(--ab-accent); color: var(--ab-on-accent); }
.ab-btn--primary:hover:not(:disabled) { background: var(--ab-accent-hover); border-color: var(--ab-accent-hover); color: var(--ab-on-accent); }
.ab-btn--primary:active:not(:disabled) { background: var(--ab-accent-active); }
.ab-btn--quiet { background: transparent; border-color: transparent; color: var(--ab-text-secondary); }
.ab-btn--quiet:hover:not(:disabled) { background: var(--ab-surface-sunken); border-color: transparent; color: var(--ab-text-primary); }
.ab-btn--danger { color: var(--ab-danger-text); }
.ab-btn--danger:hover:not(:disabled) { background: var(--ab-danger-bg); border-color: var(--ab-danger-border); }
.ab-btn--sm { min-height: var(--ab-control-h-sm); padding: 0 var(--ab-space-3); font-size: var(--ab-fs-xs); }
.ab-btn--lg { min-height: var(--ab-control-h-lg); padding: 0 var(--ab-space-5); font-size: var(--ab-fs-base); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.ab-badge {
  display: inline-flex; align-items: center; gap: var(--ab-space-1); padding: 2px var(--ab-space-2);
  border: 1px solid var(--ab-neutral-border); border-radius: var(--ab-r-pill);
  background: var(--ab-neutral-bg); color: var(--ab-neutral-text); font-size: var(--ab-fs-xs); font-weight: var(--ab-fw-medium); line-height: 1.5; white-space: nowrap;
}
.ab-badge--info    { background: var(--ab-info-bg);    color: var(--ab-info-text);    border-color: var(--ab-info-border); }
.ab-badge--success { background: var(--ab-success-bg); color: var(--ab-success-text); border-color: var(--ab-success-border); }
.ab-badge--warning { background: var(--ab-warning-bg); color: var(--ab-warning-text); border-color: var(--ab-warning-border); }
.ab-badge--danger  { background: var(--ab-danger-bg);  color: var(--ab-danger-text);  border-color: var(--ab-danger-border); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.ab-card { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-r-lg); box-shadow: var(--ab-shadow-xs); }

/* ── Empty states: where to start, never a blank area ────────────────────── */
.ab-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ab-space-3);
  padding: var(--ab-space-10) var(--ab-space-6); text-align: center; color: var(--ab-text-secondary);
}
.ab-empty-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--ab-r-lg); background: var(--ab-accent-soft); color: var(--ab-accent); }
.ab-empty-title { margin: 0; font-size: var(--ab-fs-md); font-weight: var(--ab-fw-semibold); color: var(--ab-text-primary); }
.ab-empty-text { margin: 0; max-width: 44ch; font-size: var(--ab-fs-sm); line-height: var(--ab-lh-body); }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.ab-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ab-brand-100); border-top-color: var(--ab-accent); animation: ab-spin .8s linear infinite; flex: 0 0 auto; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ab-spinner { animation-duration: 2.4s; }
  .ab-btn { transition: none; }
}