/*
 * Connect stylesheets, in load order (see core/base.html):
 *   brand/fonts.css, brand/tokens.css, brand/theme.css   tokens and fonts (no layer)
 *   css/base.css          this file: layer order, element defaults, utilities
 *   brand/components.css  ported brand components            @layer brand
 *   css/components.css    reusable Connect components         @layer components
 *   css/layout.css        app shell, auth and error layouts   @layer layout
 *   css/pages.css         styles for one page only            @layer pages
 *
 * Later layers win over earlier ones whatever the selector specificity, so a layout rule
 * never has to out-specify a component rule. Put new styles in the lowest layer that fits.
 */
@layer base, brand, components, layout, pages, utilities;

@layer base {
  :root { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
  p { margin: 0; }
  a { color: var(--link); text-underline-offset: 3px; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  button { font: inherit; }
}

@layer utilities {
  .mono { font-family: var(--font-mono); font-size: .9em; }
  .narrow { max-width: 36rem; }

  /* htmx request indicators */
  .htmx-indicator { opacity: 0; transition: opacity var(--bp-dur-quick) var(--bp-ease-tide); }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
}