/* Element defaults. Reset lives in reset.css; layer order in _global.css.
   Element selectors use :where() so their defaults are zero-specificity
   (Fizzy-style) and any class overrides them without a specificity fight. */

@layer base {
  :where(body) {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-normal);
    -webkit-font-smoothing: antialiased;
  }

  :where(h1, h2, h3) {
    line-height: var(--leading-tight);
    font-weight: 600;
  }

  :where(a) {
    color: var(--color-link);

    @media (any-hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }
  }

  ::selection {
    background: var(--color-mist);
  }

  :focus-visible {
    outline: 0.125rem solid var(--focus-ring-color);
    outline-offset: 0.125rem;
    border-radius: var(--radius-xs);
  }

  /* The reading column + the `app` container-query host. Convention: in-column
     components respond to their container via `@container app (...)`, NOT the
     viewport, so they adapt to whatever width they're handed (and a future
     sidebar that re-widths the column is a layout-only change). Reserve viewport
     `@media` for fixed chrome (the top bar, the type-scale bump) and the eventual
     top-level layout grid. Note: container size = content-box (narrower than the
     viewport by this padding), so a `min-width` threshold must sit below the
     column's content-box max. */
  .app-main {
    inline-size: 100%;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block-start: 1rem;
    padding-block-end: 3rem;
    padding-inline: var(--inline-space);
    container-type: inline-size;
    container-name: app;
  }
}