/* Page-wide typography on top of Basecoat's base (Tailwind preflight): the app's text size, headings, inline links,
   motion, and the few Tailwind utilities our markup uses. In a shadcn build this is globals.css's @layer base. */
@layer base {
  /* What sticks at the top of the window (ui.js "room under what sticks at the top") is kept clear of anything the
     window scrolls to, the focused control above all, with room for its focus ring below too (QUA-01). */
  html { scroll-padding: calc(var(--sticky-top) + var(--sticky-bars, 0px) + 0.5rem) 0 0.5rem; }
  body { background: var(--background); color: var(--foreground); font-size: var(--app-font-size); line-height: 1.45; font-kerning: normal; }
  h1 { font-size: var(--text-title); font-weight: 650; letter-spacing: var(--tracking-title); line-height: 1.15; }
  h2 { font-size: var(--text-section); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
  h3 { font-size: var(--text-body); font-weight: 600; }
  /* Preflight makes every svg a block; icons sit in the line of text unless a component lays them out. */
  svg { display: inline; vertical-align: middle; }
  /* Inline links in text: the accent, underlined quietly until pointed at. Components (buttons, nav, menu items) carry
     a class and style their own. */
  :where(.app-main, dialog, [data-popover]) a:not([class], [role], .breadcrumb a) { color: var(--link); font-weight: 500; text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--duration-hover) var(--ease-out); }
  :where(.app-main, dialog, [data-popover]) a:not([class], [role], .breadcrumb a):hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  ::selection { background: var(--selected); }
}

/* Motion is decoration: a reader who asks for less gets none (transitions and entrances end at once). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

@layer utilities {
  .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; }
  .tabular-nums { font-variant-numeric: tabular-nums; }
  /* Tailwind's names, so markup lifts into the React build unchanged. */
  .text-muted-foreground { color: var(--muted-foreground); }
  .text-xs { font-size: var(--text-label); }
}