/* ==========================================================================
   tokens.css
   Design tokens: colour, type and spacing scales, plus the dark theme.
   ========================================================================== */

:root{
  --ink:#141C24; --ink2:#425261; --ink3:#6B7B8A;
  --paper:#FCFCFA; --field:#E3E9EF; --field2:#D6DEE7;
  --rule:#C2CDD8; --rule2:#AFBCC9;
  --root:#0E6E62;      /* root-cause / correct */
  --trap:#9C2B4E;      /* distractor / anti-pattern */
  --focus:#A9740D;     /* your weak-area flag */
  --link:#23506E;
  --root-w:#E4F0ED; --trap-w:#F6E6EB; --focus-w:#FAF0DC;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sp:clamp(16px,3vw,28px);
}

html[data-theme="dark"] code,html[data-theme="dark"] kbd{background:#1C262F; border-color:var(--rule)}

html[data-theme="dark"] .tbl th{background:#1B242D; color:var(--ink2)}

html[data-theme="dark"] .card,html[data-theme="dark"] .gl,html[data-theme="dark"] .fact,html[data-theme="dark"] .res{background:#161E26}

html[data-theme="dark"] .brief{background:#18222B}

html[data-theme="dark"] .map .ar,html[data-theme="dark"] .pair.code>div{background:#1B242D}

html[data-theme="dark"] .pair.code .no{background:#26161C}

html[data-theme="dark"] .pair.code .yes{background:#12241F}

html[data-theme="dark"] .opt{background:#161E26}

html[data-theme="dark"] .opt:hover:not(:disabled){background:#1C262F}

html[data-theme="dark"] .opt.sel{background:#16283A}

html[data-theme="dark"] .bar .fillwrap{background:repeating-linear-gradient(135deg,#141B22,#141B22 5px,#1B242D 5px,#1B242D 10px)}

html[data-theme="dark"] .mantra{background:#08313C}

html[data-theme="dark"] select,html[data-theme="dark"] input{background:#161E26; color:var(--ink); border-color:var(--rule2)}

html[data-theme="dark"] button.act{background:var(--ink); color:#0E141A; border-color:var(--ink)}

html[data-theme="dark"] button.act.ghost{background:transparent; color:var(--ink)}

html[data-theme="dark"] nav.tabs button[aria-selected="true"]{background:var(--ink); color:#0E141A}

html[data-theme="dark"] body::before{opacity:.28}