/* ── packet-factory design tokens ───────────────────────────────────────────────────────────────────
   The single source of truth for color / spacing / type / radius / shadow, consumed by every host
   (app.html, preview.html, runtime.html) and the /styleguide gallery. Vanilla CSS custom properties —
   no framework. Values were consolidated from the pre-token CSS at VISUAL PARITY (each token equals a
   value already in use), so adopting a token never changes a pixel. A host MAY override a token in its
   own <style> :root for an intentional local difference. See styleguide.html for the live gallery. */
:root {
  /* — neutrals & surfaces — */
  --ink: #1a1a1a;           /* primary text */
  --muted: #6a6a72;         /* secondary text */
  --bg: #f4f4f8;            /* app background */
  --surface: #fff;          /* cards, bars, inputs */
  --surface-soft: #fafafe;  /* faint inset panels (kanban col, summary cards) */
  --surface-hover: #f7f7fc; /* row / card hover */
  --control-hover: #f0f0f6; /* button / control hover */
  --chip-bg: #f4f4fb;       /* glyph / type-chip fill */
  --form-bg: #f2f2f6;       /* form / container / pill fill (a step darker than surface-soft) */
  --form-accent-light: #eef0ff; /* blue-tint form / logic background (table headers, active rows) */

  /* — borders (a light→strong ladder) — */
  --border-faint: #eee;     /* faintest row separators */
  --border-soft: #e3e3ef;   /* light purple-grey divider (cards, flow nodes) */
  --hair: #dcdce4;          /* hairline border (the default edge) */
  --border-medium: #d4d4de; /* control / input borders, table cells */
  --line: #1a1a1a;          /* strong border / underline */

  /* — accent (brand lavender/indigo) — */
  --accent: #e8e9ff;        /* soft accent fill (primary button, active nav) */
  --accent-hover: #dadcff;  /* its hover */
  --accent-strong: #5a59d6; /* solid accent (builder accent, focus) */
  --accent-soft: #ecebfb;   /* faint accent wash */

  /* — status — */
  --ok: #2a8a4a;       --ok-soft: #eafbe7;   --ok-line: #bfe5b3;
  --warn: #e0a300;     --warn-soft: #fff3d6;
  --danger: #c0392b;   --danger-text: #b42318; --danger-soft: #fdecea; --danger-line: #f0c0bc;

  /* — thing-type palette (tags, glyphs, pills, builder zones) — */
  --type-content-bg: #eafbe7;     --type-content-line: #bfe5b3;
  --type-computation-bg: #fff3d6; --type-computation-line: #f0d9a0;
  --type-interview-bg: #e8e9ff;   --type-interview-line: #c2c4f0;
  --type-form-bg: #fde6f3;        --type-form-line: #f0c0db;
  --type-document-bg: #ececf6;    --type-document-line: #cfcfe6;

  /* — builder / node-kind palette (the computation + interview BUILDERS: an indigo accent + node-kind
       pastels, distinct from the app's austere neutrals; promoted from the old .thingscreen/.cbuild scopes,
       de-duplicated here). The accent/soft/hair reference the global tokens (same values). — */
  --cb-accent: var(--accent-strong); --cb-accent-soft: var(--accent-soft); --cb-hair: var(--hair);
  --cb-line: #20202a; --cb-r: var(--radius-md);
  --cb-q: #e9f2ff;     --cb-q-line: #a8ccf2;     /* question / input nodes */
  --cb-logic: #f2ecff; --cb-logic-line: #c7b4ee; /* formula / rules / logic */
  --cb-coll: #e8faef;  --cb-coll-line: #a6dfbf;  /* collection */
  --cb-form: #fff4e8;  --cb-form-line: #f0d3a8;  /* form fill */

  /* — spacing scale (roughly 2/4/6/8/12/16/20/24) — */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px;
  --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px;

  /* — radius scale — */
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 99px;

  /* — type scale — */
  --font-sans: Lexend, system-ui, sans-serif;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px;
  --text-lg: 16px; --text-xl: 17px; --text-2xl: 24px;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600;
  --leading-tight: 1; --leading-normal: 1.4; --leading-relaxed: 1.5;
  --tracking-label: .04em; /* uppercase micro-labels */

  /* — elevation — */
  --shadow-sm: 0 1px 5px rgba(0, 0, 0, .14);
  --shadow-md: 0 8px 22px rgba(20, 20, 40, .16);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .2);
  --shadow-xl: 0 18px 50px rgba(20, 20, 40, .25);
}