/* @fairleadhq/design-system@0.2.5 - target base.css */
/* Fairlead base layer. Optional. Themes the parts of the page a product does not draw itself:
   selection, caret, form accent, scrollbars, focus, numerals. No component styles. */

:where(html) {
  font-family: var(--fl-font-sans);
  font-size: 100%;
  line-height: var(--fl-line-height-normal);
  color: var(--fl-text-body);
  background-color: var(--fl-surface-page);
  accent-color: var(--fl-accent);
  caret-color: var(--fl-accent);
  scrollbar-color: var(--fl-border-control) transparent;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Inherited properties are computed once, where they are declared. A subtree that changes mode,
   theme, or surface would otherwise keep the root's text colour, form accent, and caret. */
:where([data-mode], [data-theme], [data-surface]) {
  color: var(--fl-text-body);
  accent-color: var(--fl-accent);
  caret-color: var(--fl-accent);
  scrollbar-color: var(--fl-border-control) transparent;
}
:where(body) { margin: 0; }
::selection { background-color: var(--fl-accent); color: var(--fl-on-accent); }
:where(a) { color: var(--fl-text-link); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
:where(code, kbd, samp, pre, [data-numeric]) { font-family: var(--fl-font-mono); font-variant-numeric: tabular-nums; }
:where(mark) { background-color: var(--fl-highlight-wash); color: var(--fl-text-strong); border-radius: var(--fl-radius-sm); padding-inline: 0.15em; }
:where(h1, h2, h3, h4) { color: var(--fl-text-strong); font-weight: var(--fl-font-weight-semibold); line-height: var(--fl-line-height-snug); text-wrap: balance; }
:where(p) { text-wrap: pretty; }
:focus-visible {
  outline: var(--fl-focus-ring-width) solid var(--fl-focus-ring);
  outline-offset: var(--fl-focus-ring-offset);
  border-radius: var(--fl-radius-sm);
}
.fl-product-name { font-family: var(--fl-font-brand); font-weight: 600; letter-spacing: var(--fl-tracking-tight); }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}