/* ============================================================================
   AQOON base layer — element defaults built on tokens.css
   ----------------------------------------------------------------------------
   Loads AFTER tokens.css and BEFORE components/ and the surface stylesheets
   (app.css / portal.css), so anything here can still be overridden by a
   component or by an existing shell rule. Nothing in this file introduces a
   literal colour: every value comes from a token.

   Deliberately conservative. This is the foundation phase — it establishes the
   type scale, the focus ring and the reduced-motion contract, and does NOT
   restyle existing components. Bootstrap remains in charge of everything it
   already owns.
   ========================================================================== */

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

/* ----------------------------------------------------------- typography -- */
body{
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* Heading scale. Sizes only — margins stay with Bootstrap so existing spacing
   is unchanged. h1 exists here because the audit found 0 of 35 pages had one;
   the page_header macro in templates/_components/ emits it. */
h1, .h1{ font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); }
h2, .h2{ font-size: var(--fs-h2);      line-height: var(--lh-h2);      font-weight: var(--fw-bold); }
h3, .h3{ font-size: var(--fs-h3);      line-height: var(--lh-h3);      font-weight: var(--fw-semibold); }
h4, .h4{ font-size: var(--fs-h4);      line-height: var(--lh-h4);      font-weight: var(--fw-semibold); }
h5, .h5{ font-size: var(--fs-body);    line-height: var(--lh-body);    font-weight: var(--fw-semibold); }
h6, .h6{ font-size: var(--fs-sm);      line-height: var(--lh-sm);      font-weight: var(--fw-semibold); }

small, .small{ font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* Money, counts and percentages line up column-to-column. */
.tabular, td.num, th.num{ font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- links -- */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }

/* --------------------------------------------------------------- focus -- */
/* One visible focus ring for every interactive element. :focus-visible only,
   so a mouse click does not leave a ring behind but keyboard use always does.
   Uses outline (not box-shadow) so it survives overflow:hidden containers. */
:focus-visible{
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}
/* Bootstrap sets its own focus shadow on controls; align it to the token so
   the two never disagree about the brand colour. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus{
  box-shadow: var(--shadow-focus);
  border-color: var(--input-border-focus);
}

/* Skip-to-content styling, ready for the navigation phase.
   NOT wired up yet, deliberately: the link needs an id on the .page region,
   and four existing tests assert the exact string `<div class="page">` as the
   htmx swap target. Adding the bypass-block belongs with the navigation IA
   work, where those tests are revisited anyway. Visually hidden until focused. */
.skip-link{
  position: absolute; left: var(--space-2); top: -100px; z-index: 4000;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-interactive); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus{ top: var(--space-2); }

/* Screen-reader-only text that is not a Bootstrap .visually-hidden usage. */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- forms -- */
label{ color: var(--label-fg); font-weight: var(--fw-medium); }
.form-text, .help-text{ color: var(--help-fg); font-size: var(--fs-sm); }
::placeholder{ color: var(--input-placeholder); opacity: 1; }

/* ------------------------------------------------------- reduced motion -- */
/* The global contract. The audit found prefers-reduced-motion honoured in
   exactly one place, while the shell animated the sidebar, the content
   margin, the nav progress bar, toasts and card hovers regardless.
   `!important` is used deliberately: this must beat rules in app.css,
   portal.css and Bootstrap without having to edit each of them, which is what
   makes this safe to land in the foundation phase.

   scroll-behavior is included because portal.css sets `*{scroll-behavior:
   smooth}` on every element with no escape hatch. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html:focus-within{ scroll-behavior: auto !important; }
}