/*
  Ember — base reset. Load after tokens.css, before components.css.

  Every element-level rule is wrapped in :where() so it carries ZERO
  specificity. Any single class in components.css or app CSS beats it. This
  is the fix for the v2 trap where `body.ember a` (0,1,2) out-ranked `.btn`
  (0,1,0) and turned every <a class="btn"> ember-orange.

  Scoping: if Ember must coexist with another stylesheet on the same page
  (a migration), wrap these in :where(body.ember) instead of :where(body).
*/

*, *::before, *::after { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-synthesis: none;            /* faked bold smears a pixel font off its grid */
  -webkit-font-smoothing: antialiased;
  accent-color: var(--color-accent-mark);
  caret-color: var(--color-ember);
}

:where(h1, h2, h3, .font-display) {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-tight);
}
/* px, not rem: Pixelify must land on whole device pixels. Never below 16px. */
:where(h1) { font-size: var(--font-size-display-xl); }
:where(h2) { font-size: var(--font-size-display-lg); }
:where(h3) { font-size: var(--font-size-display-md); }

:where(a) {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
:where(a:hover) { color: var(--color-ember-bright); text-decoration-color: currentColor; }

:where(code, kbd, samp, pre) { font-family: var(--font-mono); font-size: 1em; }
:where(table) { font-variant-numeric: tabular-nums; }
:where(img, svg, canvas, video) { max-width: 100%; }

::selection { background: var(--color-selection); color: var(--color-text-primary); }

/* One focus treatment everywhere: a solid 2px ember outline, offset so it
   clears ember-filled controls. An outline (not box-shadow) survives
   forced-colors mode. 7:1 against every surface. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Form elements: without this a bare <button> renders with UA chrome. */
:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
}
:where(button) {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}
:where(button[disabled]) { cursor: not-allowed; }

/* Screen-reader-only text. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollbars, themed (Firefox + WebKit). */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: var(--radius-md); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}