/* ==========================================================================
   base.css — reset + elementary styles + utilities shared across pages
   Imports tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-primary);
  background: var(--color-bg);
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

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

/* Headings baseline — consumers pick per component */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 56px; line-height: 1.08; }
h2 { font-size: 40px; line-height: 1.18; }
h3 { font-size: 28px; line-height: 1.25; }
h4 { font-size: 20px; line-height: 1.3; }

@media (max-width: 640px) {
  h1 { font-size: 36px; line-height: 1.15; }
  h2 { font-size: 28px; line-height: 1.2; }
  h3 { font-size: 22px; line-height: 1.3; }
  h4 { font-size: 18px; line-height: 1.35; }
}
p { margin: 0; text-wrap: pretty; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

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

/* --- Typography utility classes --- */
.text-display   { font: var(--weight-semibold) var(--text-display) var(--font-sans); letter-spacing: var(--tracking-tight); }
.text-h1        { font: var(--weight-semibold) var(--text-h1) var(--font-sans); letter-spacing: var(--tracking-tight); }
.text-h2        { font: var(--weight-semibold) var(--text-h2) var(--font-sans); letter-spacing: var(--tracking-tight); }
.text-h3        { font: var(--weight-semibold) var(--text-h3) var(--font-sans); }
.text-h4        { font: var(--weight-semibold) var(--text-h4) var(--font-sans); }
.text-body-lg   { font: var(--weight-regular) var(--text-body-lg) var(--font-serif); }
.text-body      { font: var(--weight-regular) var(--text-body) var(--font-sans); }
.text-small     { font: var(--weight-regular) var(--text-small) var(--font-sans); color: var(--color-text-secondary); }
.text-micro     { font: var(--weight-regular) var(--text-micro) var(--font-sans); color: var(--color-text-tertiary); }
.text-eyebrow   {
  font: var(--weight-medium) var(--text-eyebrow) var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.text-mono      { font-family: var(--font-mono); font-size: 0.92em; }

/* --- Inline citation link (external authority) --- */
.cite {
  color: var(--color-link-external);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--color-link-external) 30%, transparent);
  padding: 0 1px;
  white-space: nowrap;
}
.cite:hover { border-bottom-color: var(--color-link-external); color: var(--color-link-external); }
.cite::after {
  content: "";
  display: inline-block;
  width: 0.55em; height: 0.55em;
  margin-left: 0.25em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' d='M6 3h7v7M13 3L5 11'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' d='M6 3h7v7M13 3L5 11'/></svg>") no-repeat center/contain;
  vertical-align: 0.02em;
  opacity: 0.7;
}

/* --- Layout primitives --- */
.container      { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide{ max-width: var(--container-wide); }
.container--article { max-width: var(--container-article); }

.section        { padding-block: clamp(3rem, 6vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--subtle{ background: var(--color-bg-subtle); }
.section--inverse { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: var(--color-text-inverse); }

.stack > * + *      { margin-top: var(--stack-gap, var(--space-4)); }
.stack-lg > * + *   { margin-top: var(--space-6); }
.stack-xl > * + *   { margin-top: var(--space-8); }

.grid               { display: grid; gap: var(--space-6); }
.grid-12            { grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid-12 > [class*="col-span"] { grid-column: 1 / -1; } }
@media (max-width: 640px)  { .grid-12 { grid-template-columns: 1fr; } }

.rule-top    { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.rule-bottom { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); }
.hairline    { height: 1px; background: var(--color-border); border: 0; margin: 0; }

.skip-link {
  position: absolute; top: -100px; left: var(--space-4);
  background: var(--color-bg-inverse); color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}