/* ==========================================================================
   Base — reset, element defaults, accessibility primitives
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  body > main {
    flex: 1 0 auto;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select { font: inherit; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
}

@layer base {
  body {
    font-family: var(--font-family-sans);
    font-size: var(--text-normal);
    line-height: var(--line-height-normal);
    color: var(--color-ink-primary);
    background-color: var(--surface-base);
  }

  html { font-size: 100%; }

  @media (min-width: 40rem) { html { font-size: 106.25%; } }

  h1 {
    font-size: clamp(2.25rem, 2rem + 1vw, 3rem);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: clamp(1.875rem, 1.75rem + 0.75vw, 2.25rem);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
  }

  h3 {
    font-size: clamp(1.5rem, 1.375rem + 0.5vw, 1.875rem);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
  }

  h4 {
    font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-semibold);
  }

  .prose {
    max-inline-size: 65ch;
    line-height: var(--line-height-relaxed);
  }
  .prose > * + * { margin-block-start: var(--space-4); }
  .prose h2 { margin-block-start: var(--space-12); margin-block-end: var(--space-2); }
  .prose h3 { margin-block-start: var(--space-8);  margin-block-end: var(--space-2); }
  .prose ul, .prose ol { padding-inline-start: var(--space-6); }

  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast);
  }
  a:hover { color: var(--color-link-hover); }

  /* External-link indicator. Excludes icon-only links (those with an
     <svg> child) — the icon already signals where the link goes. */
  a[target="_blank"]:not(:has(svg))::after {
    content: "↗";
    display: inline-block;
    margin-inline-start: 0.2em;
    color: currentColor;
    font-family: var(--font-family-sans);
    text-decoration: none;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  @media (any-hover: hover) {
    a[target="_blank"]:not(:has(svg)):hover::after {
      opacity: 1;
      transform: translate(1px, -1px);
    }
  }

  a[target="_blank"]:not(:has(svg)):focus-visible::after {
    opacity: 1;
  }

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

  code {
    padding: 0.125em 0.375em;
    background-color: var(--surface-elevated);
    border-radius: var(--radius-sm);
  }

  pre {
    padding: var(--space-4);
    background-color: var(--surface-elevated);
    border-radius: var(--radius-md);
    overflow-x: auto;
  }
  pre code { padding: 0; background-color: transparent; }

  *:focus { outline: none; }

  *:focus-visible {
    outline: 2px solid var(--focus-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-secondary);
    border-radius: var(--radius-sm);
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background-color: var(--interactive-primary);
    color: var(--color-ink-inverted);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    transform: translateY(-200%);
    transition: transform var(--transition-fast);
  }
  .skip-link:focus { transform: translateY(0); }

  .touch-target {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --color-ink-secondary: oklch(var(--lch-ink-darkest));
      --color-ink-tertiary:  oklch(var(--lch-ink-darker));
      --border-subtle:       oklch(var(--lch-ink-medium));
      --border-default:      oklch(var(--lch-ink-dark));
    }

    a { text-decoration-thickness: 2px; }
  }

  @media (prefers-reduced-transparency: reduce) {
    :root {
      --shadow-sm:   none;
      --shadow-base: none;
      --shadow-md:   none;
      --shadow-lg:   none;
    }
  }

  @media (forced-colors: active) {
    *:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 2px;
      box-shadow: none;
    }

    .skip-link {
      background-color: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonText;
    }

    a { color: LinkText; }
  }
}