/* ============================================================================
   base.css — Reset, typography, primitives
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Headings ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3) 0;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
h2 { font-size: var(--fs-2xl); margin-top: var(--sp-10); padding-top: var(--sp-2); }
h3 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
h4 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
h5 { font-size: var(--fs-base); margin-top: var(--sp-4); }
h6 { font-size: var(--fs-sm); margin-top: var(--sp-4); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fg-muted); }

/* ── Body copy ─────────────────────────────────────────────────────────── */

p {
  margin: 0 0 var(--sp-4) 0;
  line-height: var(--lh-relaxed);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

strong, b { font-weight: 600; }
em, i { font-style: italic; }

ul, ol {
  margin: 0 0 var(--sp-4) 0;
  padding-left: var(--sp-6);
  line-height: var(--lh-relaxed);
}

li { margin-bottom: var(--sp-1); }

/* ── Code ──────────────────────────────────────────────────────────────── */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--color-code-bg);
  color: var(--color-code-fg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

pre {
  margin: 0 0 var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

pre code {
  padding: 0;
  background: transparent;
  border: 0;
}

kbd {
  display: inline-block;
  padding: 0.15em 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-kbd-bg);
  border: 1px solid var(--color-kbd-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 0 var(--sp-6) 0;
  width: 100%;
  font-size: var(--fs-sm);
}

th, td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: 600;
  background: var(--color-bg-subtle);
  border-bottom-width: 2px;
  border-bottom-color: var(--color-border-strong);
}

/* ── Media ─────────────────────────────────────────────────────────────── */

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

img.doc-img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: var(--sp-2) 0;
}

/* ── Blockquote / callout primitives ──────────────────────────────────── */

blockquote {
  margin: 0 0 var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-callout-note-bg);
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
}

blockquote p:last-child { margin-bottom: 0; }

.doc-callout {
  margin: 0 0 var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--color-callout-note-border);
  background: var(--color-callout-note-bg);
  border-radius: var(--radius-sm);
}

.doc-callout--note    { border-left-color: var(--color-callout-note-border); background: var(--color-callout-note-bg); }
.doc-callout--warning { border-left-color: var(--color-callout-warn-border); background: var(--color-callout-warn-bg); }

.doc-callout__body { font-size: var(--fs-sm); }
.doc-callout__body p:last-child { margin-bottom: 0; }

/* ── Horizontal rule ───────────────────────────────────────────────────── */

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

/* ── Focus ─────────────────────────────────────────────────────────────── */

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--conviva-green-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: rgba(156, 220, 0, 0.25);
  color: var(--color-fg);
}