/* Harness Engineering — shared theme tokens and base styles
   Used by hero-equation, without-vs-with, evidence-chart, harness-explorer,
   run-trace, failure-modes, invest-first, decision-lanes. */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Background gradient stops */
  --bg-start: #f7efe5;
  --bg-mid: #e8f5fa;
  --bg-end: #f4e7e2;

  /* Text */
  --text: #0d2138;
  --text-strong: #051324;
  --muted: rgba(16, 42, 67, 0.62);
  --muted-soft: rgba(16, 42, 67, 0.42);

  /* Surface */
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(255, 255, 255, 0.94);
  --border: rgba(16, 42, 67, 0.14);
  --border-strong: rgba(16, 42, 67, 0.22);

  /* Accent palette */
  --accent: #0a8aab;
  --accent-2: #f97316;
  --accent-3: #16825d;

  /* Status */
  --warn: #d2451e;
  --good: #16825d;

  /* 5-layer canonical colors (used in hero, explorer, failure-modes, invest-first) */
  --L1: #f97316;  /* Constraint    — orange */
  --L2: #0a8aab;  /* Context       — cyan */
  --L3: #a56cff;  /* Execution     — violet */
  --L4: #16825d;  /* Verification  — jade */
  --L5: #b8860b;  /* Lifecycle     — amber */

  /* Heatmap */
  --heat-empty: rgba(16, 42, 67, 0.10);
  --heat-partial: #f4cb73;
  --heat-strong: #16825d;

  /* Shadow */
  --shadow: 0 18px 38px rgba(16, 42, 67, 0.12);
  --shadow-soft: 0 12px 28px rgba(16, 42, 67, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-start: #040915;
    --bg-mid: #050b16;
    --bg-end: #02050c;
    --text: #ebf4ff;
    --text-strong: #ffffff;
    --muted: rgba(235, 244, 255, 0.66);
    --muted-soft: rgba(235, 244, 255, 0.42);
    --surface: rgba(11, 21, 38, 0.86);
    --surface-strong: rgba(13, 24, 42, 0.94);
    --border: rgba(166, 212, 255, 0.16);
    --border-strong: rgba(166, 212, 255, 0.32);
    --accent: #22d3ee;
    --accent-2: #f97316;
    --accent-3: #4edab5;
    --warn: #ff776c;
    --good: #4edab5;
    --L1: #f97316;
    --L2: #22d3ee;
    --L3: #a56cff;
    --L4: #4edab5;
    --L5: #f4cb73;
    --heat-empty: rgba(166, 212, 255, 0.08);
    --heat-partial: #f4cb73;
    --heat-strong: #4edab5;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.30);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-start: #040915;
  --bg-mid: #050b16;
  --bg-end: #02050c;
  --text: #ebf4ff;
  --text-strong: #ffffff;
  --muted: rgba(235, 244, 255, 0.66);
  --muted-soft: rgba(235, 244, 255, 0.42);
  --surface: rgba(11, 21, 38, 0.86);
  --surface-strong: rgba(13, 24, 42, 0.94);
  --border: rgba(166, 212, 255, 0.16);
  --border-strong: rgba(166, 212, 255, 0.32);
  --accent: #22d3ee;
  --accent-2: #f97316;
  --accent-3: #4edab5;
  --warn: #ff776c;
  --good: #4edab5;
  --L1: #f97316;
  --L2: #22d3ee;
  --L3: #a56cff;
  --L4: #4edab5;
  --L5: #f4cb73;
  --heat-empty: rgba(166, 212, 255, 0.08);
  --heat-partial: #f4cb73;
  --heat-strong: #4edab5;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.30);
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Base body */
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 14%, rgba(34, 211, 238, 0.10), transparent 32%),
    radial-gradient(circle at 86% 86%, rgba(249, 115, 22, 0.10), transparent 32%),
    linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 48%, var(--bg-end) 100%);
  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
}

/* Embed mode (?embed=1) — visual is loaded inside an iframe.
   Lock to viewport height and never scroll the document; each visual
   is responsible for distributing its content via grid/flex internally. */
:root[data-embedded="true"],
:root[data-embedded="true"] body {
  height: 100%;
  overflow: hidden;
}
:root[data-embedded="true"] body {
  min-height: 0;
}

/* Shared shell layout */
.shell {
  width: min(calc(100% - 32px), 1280px);
  margin: 0 auto;
  padding: 28px 0 36px;
}
:root[data-embedded="true"] .shell {
  width: 100%;
  height: 100%;
  padding: 14px 18px;
  /* Each visual's own .shell rule sets display + grid/flex template. */
}

/* Shared typography utilities */
.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}