/* CapitalBridge brand tokens — lifted from Styles/input.css */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --teal: #468C81;
  --teal-2: #3d7d72;
  --navy: #214B63;
  --amber: #CC8B47;
  --danger: #C75B5B;
  --info: #5A9BD5;
  --slate: #86979B;

  /* LIGHT */
  --surface-a: #faf8f5;
  --surface-a-2: #f2efe9;
  --surface-a-3: #eae5de;
  --surface-b: #e7e1d7;
  --surface-b-2: #ded7cb;
  --surface-b-3: #d4cbc0;
  --on-surface: #1a2e38;
  --on-surface-2: #3a5560;
  --on-surface-muted: #5e7580;
  --line: #d4cdc4;
  --line-2: #b8b0a5;
  --shadow-color: rgba(0,0,0,0.08);
}

.dark {
  --surface-a: #0b1920;
  --surface-a-2: #0f2029;
  --surface-a-3: #142a36;
  --surface-b: #112530;
  --surface-b-2: #162e3b;
  --surface-b-3: #19303f;
  --on-surface: #edf3f6;
  --on-surface-2: #a0bcc8;
  --on-surface-muted: #7098a8;
  --line: #1c3a4a;
  --line-2: #2a5265;
  --shadow-color: rgba(0,0,0,0.3);
}

.dark .text-teal { color: #52a396; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--surface-b);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding: 48px 32px;
}

.font-display { font-family: 'Fraunces', Georgia, serif; font-feature-settings: "ss01"; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }
.text-teal    { color: var(--teal); }
.text-amber   { color: var(--amber); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-muted   { color: var(--on-surface-muted); }
.text-2       { color: var(--on-surface-2); }

.viz-stage {
  max-width: 1320px;
  margin: 0 auto;
}

.viz-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 18px;
}
.viz-caption::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--teal);
  border-radius: 1px;
}

.viz-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-surface);
  margin: 0 0 40px 0;
  max-width: 780px;
}
.viz-title .accent { color: var(--teal); }

.window {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-b);
  box-shadow: 0 30px 80px -20px var(--shadow-color), 0 8px 24px -8px var(--shadow-color);
  overflow: hidden;
}
.window-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-b-2);
  border-bottom: 1px solid var(--line);
}
.window-bar .dots { display: flex; gap: 6px; }
.window-bar .dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-2);
}
.window-bar .title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--on-surface-muted);
  margin-left: 10px;
}
.window-bar .live {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--teal);
}
.window-bar .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.pill.ok      { background: rgba(70,140,129,0.16); color: var(--teal); }
.pill.warn    { background: rgba(204,139,71,0.18); color: var(--amber); }
.pill.bad     { background: rgba(199,91,91,0.14);  color: var(--danger); }
.pill.info    { background: rgba(90,155,213,0.14); color: var(--info); }
.pill.neutral { background: var(--surface-b-3); color: var(--on-surface-muted); }
.dark .pill.ok { color: #52a396; }

.chip-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.theme-toggle {
  position: fixed;
  top: 16px; right: 20px;
  z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-a);
  color: var(--on-surface-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
}
.theme-toggle:hover { color: var(--teal); border-color: var(--teal); }

/* small separator line (used inside cards) */
.hr { height: 1px; background: var(--line); border: 0; margin: 12px 0; }

/* progress bar */
.bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > div { height: 100%; border-radius: 4px; background: var(--teal); }

/* thin card */
.card {
  background: var(--surface-b-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}