/* ==========================================================================
   Jaeger Template — Element Defaults
   --------------------------------------------------------------------------
   Typography and element baselines for the public site. Consumes semantic
   tokens only — never primitives. Edit tokens.css to re-theme.
   ========================================================================== */

@layer base {
  html {
    /* Establish root font-size. Honors user's browser zoom + accessibility. */
    font-size: 100%;
    line-height: var(--leading-normal);
    color-scheme: light;
    /* Smooth in-page anchor scrolling, suppressed for reduced-motion. */
    scroll-behavior: smooth;
    /* Prevents fixed/transformed elements (site-rail in its slid-out
       hide state) from extending the document's scrollWidth and showing
       a horizontal scrollbar. `clip` over `hidden` so we don't create a
       scroll container or break sticky/fixed ancestors. */
    overflow-x: clip;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Belt-and-suspenders alongside the html-level clip — Chromium can
       still register horizontal scrollability when only the root carries
       the clip. Carousel uses `50vw` for right-bleed, which overshoots
       clientWidth by half the scrollbar width when a vertical scrollbar
       exists; body-level clip absorbs that. */
    overflow-x: clip;
  }

  /* ----- Headings ------------------------------------------------------- */

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

  /* Vertical rhythm — only inside flow contexts, not on every element. */
  :where(h1, h2, h3, h4, h5, h6) + * {
    margin-top: var(--space-4);
  }

  :where(p, ul, ol, blockquote, pre, hr, figure, table) + :where(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--space-7);
  }

  /* ----- Paragraphs & inline text -------------------------------------- */

  p {
    text-wrap: pretty;
    max-width: 70ch;
  }

  :where(p, ul, ol, blockquote, pre, figure, table) + :where(p, ul, ol, blockquote, pre, figure, table) {
    margin-top: var(--space-4);
  }

  strong, b { font-weight: var(--font-medium); }
  em, i     { font-style: italic; }
  small     { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ----- Links ---------------------------------------------------------- */

  a {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
    transition: color var(--duration-fast) var(--ease-standard),
                text-decoration-color var(--duration-fast) var(--ease-standard);
  }

  a:hover {
    color: var(--color-accent-hover);
    text-decoration-color: currentColor;
  }

  /* ----- Lists ---------------------------------------------------------- */

  :where(ul, ol) {
    padding-left: var(--space-5);
    max-width: 70ch;
  }

  :where(ul) { list-style: disc; }
  :where(ol) { list-style: decimal; }

  li + li { margin-top: var(--space-2); }

  /* Nested lists tighten up. */
  li > :where(ul, ol) {
    margin-top: var(--space-2);
  }

  /* ----- Quote, code, hr, figure --------------------------------------- */

  blockquote {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-style: italic;
    max-width: 70ch;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  :not(pre) > code {
    padding: 0.15em 0.35em;
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
  }

  pre {
    padding: var(--space-4);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    line-height: var(--leading-snug);
  }

  pre code {
    padding: 0;
    background: none;
    font-size: inherit;
  }

  hr {
    border: 0;
    height: 1px;
    background-color: var(--color-border);
    margin-block: var(--space-7);
  }

  figure {
    margin-block: var(--space-5);
  }

  figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
  }

  /* ----- Tables --------------------------------------------------------- */

  table {
    width: 100%;
    font-size: var(--text-sm);
    text-align: left;
  }

  th, td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  th {
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
  }

  /* ----- Forms (minimal — full styling lands with components) --------- */

  :where(input, textarea, select) {
    background-color: var(--color-bg-inset);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
  }

  /* ----- Selection & focus --------------------------------------------- */

  ::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-fg);
  }

  :focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ----- Skip link (a11y plumbing — visible only when focused) -------- */

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    z-index: 100;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ----- Layout helpers (just enough to render a page) ---------------- */

  /* Page-level container — matches main site width. Use with class. */
  .container {
    width: min(100% - 2 * var(--space-5), var(--container-default));
    margin-inline: auto;
  }

  .container--narrow { max-width: var(--container-narrow); }
  .container--wide   { max-width: var(--container-wide); }

  /* Vertical spacing primitive for sections. */
  .stack-y > * + * {
    margin-top: var(--space-5);
  }
}