/* ─── Design tokens ────────────────────────────────────────────── */
:root {
  --n-50:#FAFAFA; --n-100:#F4F4F5; --n-200:#E4E4E7; --n-300:#D4D4D8;
  --n-400:#A1A1AA; --n-500:#71717A; --n-700:#3F3F46; --n-800:#27272A;
  --n-900:#18181B; --n-950:#09090B;

  --bg:        var(--n-950);
  --surface:   var(--n-900);
  --surface-2: var(--n-800);
  --text:      var(--n-100);
  --text-soft: var(--n-300);
  --text-mute: var(--n-500);
  --border:    #A1A1AA26;

  --lime-1: #F2FEC0;
  --lime-2: #E5FE7A;
  --lime-3: #D6FD3A;
  --lime-4: #86B515;
  --lime-5: #4A6310;

  --state-error: #F43F5E;
  --state-warn:  #EAB308;
  --state-info:  #0EA5E9;

  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Base ─────────────────────────────────────────────────────── */
html, body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Anchor navigation ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Offset so jump targets clear the revealed announcement bar */
section[id] { scroll-margin-top: 5rem; }

::selection {
  background: var(--lime-3);
  color: var(--n-950);
}

/* ─── Semantic <em> — lime emphasis fragment ───────────────────── */
h1 em, h2 em, h3 em {
  color: var(--lime-3);
  font-style: normal;
}

p em {
  font-style: normal;
  color: var(--lime-3);
}

/* ─── Highlighter mark — lime band behind text ─────────────────── */
.highlight {
  background-image: linear-gradient(
    to top,
    transparent 8%,
    var(--lime-3) 8%,
    var(--lime-3) 38%,
    transparent 38%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding: 0 0.04em;
}

/* ─── Mono eyebrow ─────────────────────────────────────────────── */
.meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ─── Light section invert ─────────────────────────────────────── */
section.light {
  background: var(--n-100);
  color: var(--n-950);
}
section.light em { color: var(--lime-4); }
section.light .meta { color: var(--n-500); }
section.light .text-ink { color: var(--n-950); }
section.light .text-ink-soft { color: var(--n-700); }
section.light .text-ink-mute { color: var(--n-500); }
section.light .border-rule { border-color: var(--n-200); }
section.light .border-y { border-color: var(--n-200); }
section.light .divide-rule > :not([hidden]) ~ :not([hidden]) { border-color: var(--n-200); }
section.light .bg-surface { background: #FFFFFF; }
section.light .bg-surface2 { background: var(--n-100); }