:root{
  /* brand core */
  --bjc-ink:#0F172A; --bjc-teal:#0E7490; --bjc-offwhite:#F8FAFC;

  /* neutral ramp (slate) */
  --slate-950:#020617; --slate-900:#0F172A; --slate-800:#1E293B; --slate-700:#334155;
  --slate-600:#475569; --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1;
  --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC;

  /* accent ramp (cyan) */
  --cyan-900:#164E63; --cyan-800:#155E75; --cyan-700:#0E7490; --cyan-600:#0891B2;
  --cyan-500:#06B6D4; --cyan-400:#22D3EE; --cyan-100:#CFFAFE; --cyan-50:#ECFEFF;

  /* semantic */
  --success:#059669; --warning:#D97706; --danger:#DC2626;

  /* type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --text-xs:0.8125rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;
  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.6;
  --ls-tight:-0.02em; --ls-heading:-0.01em; --ls-wide:0.12em;

  /* space / radius / layout */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem;
  --radius-sm:4px; --radius:6px; --radius-lg:10px; --radius-full:9999px;
  --container-max:72rem; --container-prose:65ch;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06); /* use sparingly; prefer borders */

  /* ROLES — light (default) */
  --bg:#FFFFFF; --surface:var(--slate-50); --surface-2:var(--slate-100);
  --border:var(--slate-200); --border-strong:var(--slate-300);
  --text:var(--bjc-ink); --text-secondary:var(--slate-600); --text-muted:var(--slate-500);
  --accent:var(--cyan-700); --accent-hover:var(--cyan-800); --accent-active:var(--cyan-900);
  --accent-tint:var(--cyan-50); --on-accent:#FFFFFF;
  --link:var(--cyan-800);            /* AA on white */
  --focus-ring:var(--cyan-700);
  --code-bg:var(--bjc-ink); --code-text:var(--bjc-offwhite); --code-accent:var(--cyan-400);
}

/* ROLES — dark. Auto by system, or force with [data-theme] */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--bjc-ink); --surface:var(--slate-800); --surface-2:var(--slate-700);
    --border:var(--slate-700); --border-strong:var(--slate-600);
    --text:var(--bjc-offwhite); --text-secondary:var(--slate-300); --text-muted:var(--slate-400);
    --accent:var(--cyan-400); --accent-hover:var(--cyan-500); --accent-active:var(--cyan-600);
    --accent-tint:rgba(34,211,238,.10); --on-accent:#FFFFFF;
    --link:var(--cyan-400); --focus-ring:var(--cyan-400);
    --code-bg:#0B1220; --code-text:var(--bjc-offwhite); --code-accent:var(--cyan-400);
  }
}
[data-theme="dark"]{
  --bg:var(--bjc-ink); --surface:var(--slate-800); --surface-2:var(--slate-700);
  --border:var(--slate-700); --border-strong:var(--slate-600);
  --text:var(--bjc-offwhite); --text-secondary:var(--slate-300); --text-muted:var(--slate-400);
  --accent:var(--cyan-400); --accent-hover:var(--cyan-500); --accent-active:var(--cyan-600);
  --accent-tint:rgba(34,211,238,.10); --on-accent:#FFFFFF;
  --link:var(--cyan-400); --focus-ring:var(--cyan-400);
  --code-bg:#0B1220; --code-text:var(--bjc-offwhite); --code-accent:var(--cyan-400);
}

/* minimal element defaults — adopt or ignore */
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-size:var(--text-base);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{color:var(--text);font-weight:600;line-height:var(--lh-tight);
  letter-spacing:var(--ls-heading);}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;}
a:hover{color:var(--accent-hover);}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase;font-size:var(--text-sm);
  font-weight:600;letter-spacing:var(--ls-wide);color:var(--accent);}
.eyebrow::before{content:"> ";}
code,pre,kbd{font-family:var(--font-mono);}
code{background:var(--surface-2);padding:.1em .35em;border-radius:var(--radius-sm);font-size:.9em;}
pre{background:var(--code-bg);color:var(--code-text);padding:var(--space-4);
  border-radius:var(--radius-lg);overflow:auto;}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);
  font-weight:500;font-size:var(--text-sm);padding:.625rem 1rem;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--surface);}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}