:root {
  --ink: #0c1630;
  --muted: #61718c;
  --paper: #f6f9ff;
  --card: #ffffff;
  --line: #d9e4f2;
  --soft: #edf4ff;
  --dark: #07142f;
  --accent: #145dff;
  --accent-strong: #0d46d9;
  --accent-cyan: #2edbd0;
  --accent-soft: #e8f4ff;
  --accent-cyan-soft: #e7fbf8;
  --blue: #145dff;
  --shadow: 0 24px 70px rgba(20, 50, 110, 0.13);
  --brand-glow: rgba(46, 219, 208, 0.18);
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f3f7ff;
  --muted: #9aa9c3;
  --paper: #070b18;
  --card: #0d1529;
  --line: #1e2b46;
  --soft: #0b1326;
  --dark: #050913;
  --accent: #4b8cff;
  --accent-strong: #75a7ff;
  --accent-cyan: #42e4d8;
  --accent-soft: #101f3c;
  --accent-cyan-soft: #0b292d;
  --blue: #4b8cff;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  --brand-glow: rgba(46, 219, 208, 0.22);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(20, 93, 255, .11), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(46, 219, 208, .08), transparent 28rem),
    var(--paper);
  color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -8%, rgba(20, 93, 255, .18), transparent 34rem),
    radial-gradient(circle at 92% 7%, rgba(46, 219, 208, .12), transparent 30rem),
    var(--paper);
}

.site-header { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 5px 12px var(--brand-glow)); }
.brand-name { font-weight: 760; font-size: 22px; letter-spacing: -.045em; }
.top-nav { color: var(--muted); }
.top-nav a:hover { color: var(--ink); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
  font-size: 12px;
  font-weight: 650;
}
.theme-toggle:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.theme-toggle-icon { display: grid; width: 18px; height: 18px; place-items: center; color: var(--accent-cyan); font-size: 15px; line-height: 1; }

.button {
  color: #fff;
  background: linear-gradient(130deg, #145dff 0%, #126fe5 54%, #119fba 100%);
  box-shadow: 0 9px 26px rgba(20,93,255,.18), 0 1px 0 rgba(255,255,255,.24) inset;
}
.button:hover { box-shadow: 0 12px 30px rgba(20,93,255,.24), 0 1px 0 rgba(255,255,255,.24) inset; }
.button-light { color: #07142f; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.text-button { color: var(--accent-strong); }

.hero-copy h1 { color: var(--ink); }
.hero-lede { color: var(--muted); }
.eyebrow { color: var(--accent-strong); }
.trust-strip span {
  border-color: var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

.window {
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
  background: var(--card);
  box-shadow: var(--shadow), 0 0 0 1px rgba(46,219,208,.04) inset;
}
.window-bar { border-bottom-color: var(--line); color: var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: 7px; }
.wordmark-mark { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 3px 8px var(--brand-glow)); }
.local-pill { color: #087b78; background: var(--accent-cyan-soft); }
.rail { color: #c5d2e7; background: linear-gradient(180deg, #07142f 0%, #081127 100%); }
.rail small { color: #7183a1; }
.rail li.active { color: #fff; background: linear-gradient(90deg, rgba(20,93,255,.35), rgba(46,219,208,.10)); }
.work-surface { background: var(--card); }
.work-surface > small, .trust-rail > small { color: var(--muted); }
.work-surface > p { color: var(--muted); }
.source-grid div { border-color: var(--line); background: var(--soft); }
.source-grid span { color: var(--muted); }
.finding-preview { border-color: var(--line); background: var(--card); box-shadow: 0 8px 24px rgba(18,50,105,.07); }
.finding-preview .index, .finding-preview p { color: var(--muted); }
.supported { color: #087b78; background: var(--accent-cyan-soft); }
.trust-rail { background: var(--soft); }
.trust-rail dl div { border-bottom-color: var(--line); }
.trust-rail dt { color: var(--muted); }

.problem { border-top-color: var(--line); }
.problem-card,
.workflow-grid li {
  border-color: var(--line);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: 0 10px 34px rgba(20,50,110,.035);
}
.problem-card span, .problem-card p, .workflow-grid li span, .workflow-grid p { color: var(--muted); }
.problem-card:hover, .workflow-grid li:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

.demo-section {
  background:
    radial-gradient(circle at 80% 15%, rgba(46,219,208,.08), transparent 30rem),
    linear-gradient(150deg, #050913 0%, #07142f 58%, #061821 100%);
  color: #f3f7ff;
}
.demo-section .eyebrow { color: #69a0ff; }
.demo-section .section-heading > p:last-child { color: #9babc5; }

.position-card {
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
  background:
    radial-gradient(circle at 86% 10%, rgba(46,219,208,.10), transparent 18rem),
    var(--soft);
}
.usecase-item { border-bottom-color: var(--line); }
.usecase-item span { color: var(--muted); }

.beta-card {
  border: 1px solid rgba(92,139,255,.18);
  color: #f5f8ff;
  background:
    radial-gradient(circle at 18% 0%, rgba(20,93,255,.28), transparent 24rem),
    radial-gradient(circle at 88% 10%, rgba(46,219,208,.12), transparent 21rem),
    linear-gradient(145deg, #050913, #07142f 64%, #071a22);
  box-shadow: 0 30px 90px rgba(5,12,30,.24);
}
.beta-card .eyebrow { color: #69a0ff; }
.beta-card > p:not(.eyebrow) { color: #b1bfd4; }
.beta-card small { color: #8495af; }
.footer { color: var(--muted); }

.beta-dialog { color: var(--ink); background: var(--card); }
.beta-dialog::backdrop { background: rgba(3,7,16,.66); }
.dialog-shell { background: var(--card); }
.dialog-copy {
  background:
    radial-gradient(circle at 10% 0%, rgba(20,93,255,.10), transparent 20rem),
    var(--soft);
}
.dialog-copy > p:last-child { color: var(--muted); }
.dialog-close { color: var(--ink); background: var(--soft); }
.tally-frame, .tally-frame iframe { background: #fff; }
.tally-placeholder { color: #61718c; background: #fff; }

/* Re-skin the fictional product journey without changing its behavior. */
.journey-toolbar { border-color: #172747; background: #071126; color: #c8d5ea; }
.journey-live-dot { background: var(--accent-cyan); box-shadow: 0 0 0 4px rgba(46,219,208,.10); }
.journey-controls button { border-color: #263956; color: #e5edfb; background: #0d1a32; }
.journey-stage { border-color: #172747; }
.journey-local, .journey-run-clock, .journey-lock, .journey-complete, .journey-generating,
.journey-finding-meta em, .journey-support-pill {
  color: #087b78 !important;
  background: var(--accent-cyan-soft);
}
.journey-nav { background: #071126; }
.journey-nav nav .is-active { background: linear-gradient(90deg, rgba(20,93,255,.36), rgba(46,219,208,.10)); }
.journey-nav-footer span { color: var(--accent-cyan); }
.journey-primary { background: linear-gradient(130deg, #145dff, #119fba); }
.journey-typebox i { background: var(--accent); }
.journey-rules span { color: var(--accent-strong); background: var(--accent-soft); }
.journey-source-row.is-selected .journey-checkbox,
.journey-run-steps .is-active > span { border-color: var(--accent); background: var(--accent); }
.journey-start { box-shadow: 0 0 0 4px rgba(20,93,255,.10); }
.journey-run-clock i, .journey-generating i { background: var(--accent-cyan); }
.journey-run-steps .is-done > span { border-color: color-mix(in srgb, var(--accent-cyan) 30%, var(--line)); color: #087b78; background: var(--accent-cyan-soft); }
.journey-run-wave i { background: #dbe8ff; }
@keyframes journey-wave { to { height: 80%; background: #9dbdff; } }
.journey-finding.is-focus { border-color: #72a2ff; box-shadow: 0 8px 25px rgba(20,93,255,.10); }
.journey-context-note.positive { color: #087b78; background: var(--accent-cyan-soft); }

html[data-theme="dark"] .window-bar,
html[data-theme="dark"] .work-surface,
html[data-theme="dark"] .finding-preview,
html[data-theme="dark"] .source-grid div,
html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .workflow-grid li { color: var(--ink); }

html[data-theme="dark"] .journey-stage,
html[data-theme="dark"] .journey-app { color: #eef4ff; background: #091022; }
html[data-theme="dark"] .journey-titlebar { border-bottom-color: #1d2b46; background: #0d162a; }
html[data-theme="dark"] .journey-device { color: #8d9db6; }
html[data-theme="dark"] .journey-surface { background: #0a1225; }
html[data-theme="dark"] .journey-context { border-left-color: #1d2b46; background: #0d172b; }
html[data-theme="dark"] .journey-context-kicker,
html[data-theme="dark"] .journey-page-heading p,
html[data-theme="dark"] .journey-evidence-header p,
html[data-theme="dark"] .journey-context dt,
html[data-theme="dark"] .journey-page-heading > div > span,
html[data-theme="dark"] .journey-evidence-header > div > span { color: #8798b3; }
html[data-theme="dark"] .journey-context dl div { border-bottom-color: #1d2b46; }
html[data-theme="dark"] .journey-context-note { color: #a9b6ca; background: #111c32; }
html[data-theme="dark"] .journey-filterbar,
html[data-theme="dark"] .journey-source-list,
html[data-theme="dark"] .journey-composer,
html[data-theme="dark"] .journey-scope-card,
html[data-theme="dark"] .journey-run-steps,
html[data-theme="dark"] .journey-run-metrics,
html[data-theme="dark"] .journey-finding,
html[data-theme="dark"] .journey-evidence-source,
html[data-theme="dark"] .journey-synthesis,
html[data-theme="dark"] .journey-evidence-header > button {
  border-color: #21304b;
  color: #edf3ff;
  background: #101a30;
}
html[data-theme="dark"] .journey-filterbar { color: #a0aec2; }
html[data-theme="dark"] .journey-filterbar > span,
html[data-theme="dark"] .journey-scope-rule,
html[data-theme="dark"] .journey-rules { background: #0c162a; }
html[data-theme="dark"] .journey-source-row,
html[data-theme="dark"] .journey-composer-footer,
html[data-theme="dark"] .journey-rules,
html[data-theme="dark"] .journey-scope-footer,
html[data-theme="dark"] .journey-run-steps > div,
html[data-theme="dark"] .journey-run-metrics > span { border-color: #1d2b46; }
html[data-theme="dark"] .journey-typebox { color: #edf3ff; }
html[data-theme="dark"] .journey-source-row small,
html[data-theme="dark"] .journey-source-row em,
html[data-theme="dark"] .journey-composer label,
html[data-theme="dark"] .journey-composer-footer small,
html[data-theme="dark"] .journey-scope-metrics small,
html[data-theme="dark"] .journey-scope-rule span,
html[data-theme="dark"] .journey-scope-rule small,
html[data-theme="dark"] .journey-scope-footer > span,
html[data-theme="dark"] .journey-run-steps small,
html[data-theme="dark"] .journey-run-metrics small,
html[data-theme="dark"] .journey-finding-index,
html[data-theme="dark"] .journey-finding-copy small,
html[data-theme="dark"] .journey-finding-meta small { color: #8798b3; }

@media (max-width: 760px) {
  .theme-toggle { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .theme-toggle-label { display: none; }
  .brand-name { font-size: 20px; }
  .brand-mark { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}