/* ==========================================================================
   Jaeger Pitch — Element Defaults (verbatim from jaeger-template)
   --------------------------------------------------------------------------
   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 rich text. Wrap any long-form text region in
        `<div class="prose">` to opt in.

   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 is owned by tokens.css (per-scheme) — do not set it here. */
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;   /* sticky header clearance for #anchors */
  }

  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-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-wrap: balance;
  }

  /* Direction v2: 500 is the ceiling for every weight on the draft. The h1
     is the single exception, so it carries the heavier weight itself rather
     than the shared rule above handing it to h2-h6 as well. */
  h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tighter);
  }

  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-medium); }
  em, i      { font-style: italic; }
  small      { font-size: var(--text-sm); color: var(--color-text-muted); }

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

  a {
    color: var(--color-accent-text);
    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;
  }

  /* Marketing surfaces set their own link treatment; only prose keeps the
     underlined accent default above. */
  main a:not(.prose a) {
    color: inherit;
    text-decoration: none;
  }

  /* ----- 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 primitives moved out --------------------------------- */
  /* `.container`, `.stack`, `.cluster`, `.auto-grid`, `.center` (and the
     `.icon` sizing class) now live in utilities.css under @layer utilities.
     Kept separate so the layout vocabulary is discoverable in one place. */

  /* ====================================================================
     .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-medium);
    color: var(--color-text-muted);
  }
}