/* ── User Guide theme: matches hearken.ai (dark surface, off-white ink, blue accent,
   Instrument Serif display + Work Sans body). Tokens taken from the live site. ── */
:root {
  --brand: #0071ed;            /* accent */
  --brand-dark: #3696ff;       /* accent-text (links on dark) */
  --brand-tint: rgba(51,149,255,.14);
  --ink: #f2efe8;              /* ink */
  --ink-soft: #a69c8c;         /* ink-muted */
  --line: rgba(242,239,232,.12);
  --bg: #15181b;               /* surface */
  --bg-alt: #1e2226;           /* surface-alt */
  --raised: #262b30;           /* surface-raised */
  --ok: #4cc38a;
  --warn: #e0a84a;
  --radius: 14px;
}
html, body { background: var(--bg); color: var(--ink); }
body { font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-feature-settings: "rlig" 1, "calt" 1; }
h1, h2, h3 { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: .01em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.3rem; }
a { color: var(--brand-dark); }
a:hover { color: #6db2ff; }
.lede, .guide-body p, .guide-body ul, .guide-body ol, .guide-sec > .blurb, .guide-card-blurb { color: var(--ink-soft); }
.guide-card, .guide-nav a { background: var(--bg-alt); border-color: var(--line); color: var(--ink); }
.guide-card:hover, .guide-nav a:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.guide-card-title, .guide-body td:first-child, .env-swatches span { color: var(--ink); }
.guide-back-btn, .guide-eyebrow, .guide-body ol > li::marker { color: var(--brand-dark); }
.guide-table-wrap { border-color: var(--line); background: var(--bg-alt); }
.guide-body thead th { background: var(--raised); color: var(--ink); }
.guide-body th, .guide-body td { border-color: var(--line); }
.guide-body code, kbd { background: var(--raised); border-color: var(--line); color: var(--ink); }
.guide-tip { background: var(--brand-tint); border-left-color: var(--brand); color: var(--ink); }
.guide-tip strong, .guide-body strong { color: var(--ink); }
.guide-new { background: var(--brand); color: #fff; }
.btn-primary { background: var(--brand); color: #fff; border-radius: 999px; }
.btn-primary:hover { background: #3395ff; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.btn-ghost:hover { border-color: var(--brand-dark); color: var(--brand-dark); }
#sections > .guide-sec + .guide-sec, .guide-nav { border-color: var(--line); }
::selection { background: rgba(0,113,237,.45); color: #fff; }