/* VCAL Docs Hub | design tokens and foundations. */
:root {
  --paper: #F3F2EC;
  --paper-2: #FAF9F4;
  --sheet: #FFFFFF;
  --rule: #D5D2C7;
  --rule-strong: #C9C5B8;
  --grid: #E6E3DA;
  --ink: #0F172A;          /* VCAL navy, from the logo */
  --ink-2: #1E293B;
  --text: #383D44;
  --muted: #50565E;
  --teal: #0E7490;         /* accent: text, labels, primary buttons */
  --teal-tint: #EAF5F7;
  --cyan: #17C8E4;         /* VCAL cyan, from the logo: small dots only */
  --cyan-on-ink: #8BE3F2;
  --on-ink: #CBD5E1;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth; }
body.v-page {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.v-page a { color: inherit; text-decoration: none; }
.v-page ::selection { background: #BDEFF8; color: var(--ink); }
.v-page :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 200; padding: 12px 16px; background: #fff; border: 2px solid var(--teal); font-weight: 600; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 16px; line-height: 1.2;
  padding: 15px 22px; border: 1.5px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--teal); color: #fff !important; }
.btn-primary:hover { background: #0B5E75; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff !important; }
/* Section label: logo dot + FIG. number */
.fig {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--teal);
}
.fig::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.h2 { margin: 16px 0 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.section { border-bottom: 1px solid var(--rule); }
.section-inner { padding-top: 88px; padding-bottom: 88px; }