/* Ariadne pre-check exploration — shared tokens + host chrome.
   Values resolved from ~/bf/flare tokens (semantic light/dark → primitives).
   Variants consume var(--exp-*) ONLY — no hardcoded colors in variant files. */

:root, :root[data-theme="light"] {
  --exp-bg-base: #fbfcfd;
  --exp-bg-surface: #ffffff;
  --exp-bg-elevated: #f8f9fa;
  --exp-text: #12181c;
  --exp-muted: #687076;
  --exp-line-subtle: #e5e8eb;
  --exp-line: #d7dbdf;
  --exp-line-strong: #c1c8cd;

  --exp-accent: #f97461;
  --exp-accent-hover: #e65543;
  --exp-accent-text: #b23a2c;
  --exp-accent-subtle: #ffeae6;
  --exp-on-solid: #ffffff;

  /* severity — tier mapping: severe→critical, high→high, caution→medium, no_known_risk→low */
  --exp-sev-critical-solid: #c60d17;
  --exp-sev-critical-text: #a51111;
  --exp-sev-critical-subtle: #fee7e7;
  --exp-sev-critical-tint: rgba(198, 13, 23, 0.14);
  --exp-sev-critical-tintBorder: rgba(198, 13, 23, 0.4);

  --exp-sev-high-solid: #d04434;
  --exp-sev-high-text: #b23a2c;
  --exp-sev-high-subtle: #ffeae6;
  --exp-sev-high-tint: rgba(208, 68, 52, 0.14);
  --exp-sev-high-tintBorder: rgba(208, 68, 52, 0.4);

  --exp-sev-medium-solid: #ca6a14;
  --exp-sev-medium-text: #9c4221;
  --exp-sev-medium-subtle: #fdf5ce;
  --exp-sev-medium-tint: rgba(202, 106, 20, 0.14);
  --exp-sev-medium-tintBorder: rgba(202, 106, 20, 0.4);
  --exp-sev-medium-onSolid: #12181c;

  --exp-sev-low-solid: #0670c5;
  --exp-sev-low-text: #1864ab;
  --exp-sev-low-subtle: #dcf0ff;
  --exp-sev-low-tint: rgba(6, 112, 197, 0.14);
  --exp-sev-low-tintBorder: rgba(6, 112, 197, 0.4);

  --exp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --exp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --exp-radius: 8px;
  --exp-radius-lg: 12px;
}

:root[data-theme="dark"] {
  --exp-bg-base: #151718;
  --exp-bg-surface: #1a1d1f;
  --exp-bg-elevated: #212426;
  --exp-text: #ecedee;
  --exp-muted: #9ba1a6;
  --exp-line-subtle: #2b2f32;
  --exp-line: #3a3f42;
  --exp-line-strong: #4c5155;

  --exp-accent: #f97461;
  --exp-accent-hover: #e65543;
  --exp-accent-text: #fdb5a8;
  --exp-accent-subtle: #5c1c14;

  --exp-sev-critical-text: #fea7a7;
  --exp-sev-critical-subtle: #550807;
  --exp-sev-high-text: #fdb5a8;
  --exp-sev-high-subtle: #5c1c14;
  --exp-sev-medium-text: #fdd960;
  --exp-sev-medium-subtle: #50200e;
  --exp-sev-medium-onSolid: #12181c;
  --exp-sev-low-text: #84c9fc;
  --exp-sev-low-subtle: #0a3258;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--exp-bg-base);
  color: var(--exp-text);
  font-family: var(--exp-sans);
  line-height: 1.5;
}

/* ---------- host chrome (toolbar, badges, variant bars, note, ribbon) ---------- */

.exp-toolbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: var(--exp-bg-surface);
  border-bottom: 1px solid var(--exp-line);
}
.exp-toolbar .exp-title { font-weight: 700; letter-spacing: 0.02em; }
.exp-toolbar .exp-title .thread { color: var(--exp-accent-text); }
.exp-toolbar .spacer { flex: 1; }
.exp-btn {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 5px 12px; border-radius: var(--exp-radius);
  border: 1px solid var(--exp-line-strong);
  background: var(--exp-bg-elevated); color: var(--exp-text);
}
.exp-btn.active {
  background: var(--exp-accent-subtle);
  border-color: var(--exp-accent);
  color: var(--exp-accent-text);
}

.exp-note {
  margin: 16px 20px; padding: 12px 16px;
  border: 1px dashed var(--exp-line-strong);
  border-radius: var(--exp-radius-lg);
  color: var(--exp-muted); font-size: 13.5px;
  background: var(--exp-bg-surface);
}
.exp-note code {
  font-family: var(--exp-mono); font-size: 12.5px;
  background: var(--exp-bg-elevated);
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--exp-line-subtle);
}

.exp-variantbar {
  position: sticky; top: 49px; z-index: 40;
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 20px;
  background: var(--exp-bg-elevated);
  border-top: 2px solid var(--exp-accent);
  border-bottom: 1px solid var(--exp-line);
}
.exp-variantbar .num {
  font-family: var(--exp-mono); font-weight: 700; font-size: 15px;
  color: var(--exp-accent-text);
}
.exp-variantbar .name { font-weight: 600; }
.exp-variantbar .desc { color: var(--exp-muted); font-size: 13px; }

.exp-mount { position: relative; padding: 24px 20px 48px; }
.exp-mount.pending { color: var(--exp-muted); font-style: italic; }

.exp-addr {
  position: absolute; top: 0; left: 0; z-index: 10;
  font-family: var(--exp-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 0 0 6px 0;
  background: var(--exp-accent-subtle);
  color: var(--exp-accent-text);
  border: 1px solid var(--exp-accent);
  border-top: none; border-left: none;
}
.exp-section { position: relative; }

.exp-ribbon {
  position: fixed; right: -44px; top: 28px; z-index: 100;
  transform: rotate(45deg);
  width: 190px; text-align: center;
  font-family: var(--exp-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 0;
  background: var(--exp-sev-medium-solid);
  color: var(--exp-sev-medium-onSolid);
  pointer-events: none;
}

.exp-footer {
  padding: 20px; border-top: 1px solid var(--exp-line);
  color: var(--exp-muted); font-size: 12.5px;
}

/* thread tints for branch distinction — flare chart.categorical.1-6 (same in both themes) */
:root {
  --exp-thread-1: #5b6cff;
  --exp-thread-2: #8aa0ff;
  --exp-thread-3: #22c08a;
  --exp-thread-4: #9333ea;
  --exp-thread-5: #0e7490;
  --exp-thread-6: #ad5009;
}