/* ==========================================================================
   IBU — Element Defaults
   --------------------------------------------------------------------------
   Two scopes:

     1. Element-level defaults. Typography baseline, heading sizes, link
        colors, focus rings, form basics, a11y helpers. NO max-widths,
        NO sibling spacing, NO list-style restoration. So a project page
        writing `<ul class="card-grid">` doesn't fight base.css.

     2. `.prose` opt-in (further down). Vertical rhythm, max-widths, list
        bullets, code/pre, figure spacing — for markdown / rich-text body.

   Visual identity is in tokens.css and components.css.
   ========================================================================== */

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

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

  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);
    font-optical-sizing: auto;
    font-variation-settings: var(--variation-body);
    letter-spacing: -0.005em;
    overflow-x: hidden;
  }

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

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

  h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-medium);
    font-variation-settings: var(--variation-display);
  }
  h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tighter); font-weight: var(--font-medium); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-text-muted);
    font-weight: var(--font-medium);
  }

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

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

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

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

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

  /* ----- Forms (universal baseline — components.css restyles) ---------- */

  :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-sm);
    padding: var(--space-2) var(--space-3);
  }

  :where(button) {
    cursor: pointer;
    font-family: inherit;
  }

  /* ----- 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: 3px;
    border-radius: var(--radius-xs);
  }

  /* On dark surfaces (hero--full image bg, CTA strip, footer) the brand-purple
     focus ring loses contrast. Lift to white for keyboard users in those zones.
     The `body.has-image-hero:not(.is-scrolled) .site-header` selector covers
     the transparent-over-image header state where nav links render white. */
  .hero--full :focus-visible,
  .cta-strip :focus-visible,
  .site-footer :focus-visible,
  body.has-image-hero:not(.is-scrolled) .site-header :focus-visible {
    outline-color: #ffffff;
  }

  /* ----- Skip link (a11y) --------------------------------------------- */

  .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-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    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 ------------------------------------------------ */

  .container {
    width: min(100% - 2 * var(--gutter-page), var(--container-default));
    margin-inline: auto;
  }

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

  .stack-y > * + * { margin-top: var(--space-5); }

  /* ====================================================================
     .prose — opt-in rich-text rhythm
     ==================================================================== */

  .prose {
    max-width: 70ch;
  }

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

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

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

  .prose blockquote {
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-accent);
    color: var(--color-text-muted);
    font-style: italic;
  }

  .prose hr {
    border: 0;
    height: 1px;
    background-color: var(--color-rule);
    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;
  }

  .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-xs);
    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-sm);
    overflow-x: auto;
    line-height: var(--leading-snug);
  }

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

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