/* ==========================================================================
   Jaeger Template — Element Defaults
   --------------------------------------------------------------------------
   Two scopes:

     1. Element-level defaults (this section). Apply to every element on the
        page. Kept narrow on purpose — only things that should be true for a
        plain unstyled page: typography baseline, heading sizes, link colors,
        focus rings, form basics, a11y helpers. NO max-widths, NO sibling
        spacing, NO list-style restoration. A project agent writing
        `<ul class="card-grid">` should not have to fight base.css.

     2. `.prose` opt-in (further down). Vertical rhythm, max-widths, list
        bullets, code/pre styling, figure spacing — the rich-text behavior
        you want for markdown content. Wrap CMS body output in
        `<div class="prose">` (templates/pages/page.php does this for you).

   Every project re-themes via tokens.css; structural rules live here.
   ========================================================================== */

@layer base {
  /* ----- Root + body --------------------------------------------------- */

  html {
    font-size: 100%;
    line-height: var(--leading-normal);
    color-scheme: light dark;
    scroll-behavior: smooth;
  }

  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);
    letter-spacing: -0.005em;
    transition: background-color var(--duration-normal) var(--ease-standard),
                color var(--duration-normal) var(--ease-standard);
  }

  /* ----- Headings (typography only, no spacing rules) ------------------ */

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    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); }

  /* ----- Inline text --------------------------------------------------- */

  p          { text-wrap: pretty; }
  strong, b  { font-weight: var(--font-semibold); }
  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;
  }

  /* ----- Forms (universal baseline — projects style further) ----------- */

  :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);
  }

  /* ====================================================================
     .prose — opt-in rich-text rhythm
     --------------------------------------------------------------------
     Wrap markdown output (or any rich-text region) in <div class="prose">
     to get reading-comfortable line lengths, vertical rhythm between
     blocks, list bullets, blockquote treatment, and code/pre styling.

     Project agents are free to override per project (different max-width,
     different rhythm, different code colors). This is a starting point,
     not a contract.
     ==================================================================== */

  .prose {
    max-width: 70ch;
  }

  /* Top-level block rhythm — adjacent siblings push each other down. */
  .prose :where(p, ul, ol, blockquote, pre, figure, table) + :where(p, ul, ol, blockquote, pre, figure, table) {
    margin-top: var(--space-4);
  }

  /* Headings introduce their following content with a small lead-in,
     and are themselves preceded by extra space when they follow prose. */
  .prose :where(h1, h2, h3, h4, h5, h6) + * {
    margin-top: var(--space-4);
  }

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

  /* Lists — restore bullets/numbers (reset.css strips them) and pad. */
  .prose :where(ul, ol) {
    padding-left: var(--space-5);
  }
  .prose :where(ul) { list-style: disc; }
  .prose :where(ol) { list-style: decimal; }

  .prose li + li { margin-top: var(--space-2); }
  .prose li > :where(ul, ol) { margin-top: var(--space-2); }

  /* Blockquote, horizontal rule, figure, figcaption. */
  .prose blockquote {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-style: italic;
  }

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

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

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

  /* Code & preformatted blocks. */
  .prose code,
  .prose kbd,
  .prose samp,
  .prose pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

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

  .prose 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);
  }

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

  /* Tables. */
  .prose table {
    width: 100%;
    font-size: var(--text-sm);
    text-align: left;
  }

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

  .prose th {
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
  }
}