/* B · Freedom Broker / Tradernet / TFOS — dark navy fintech from refs */

html[data-variant="b"] {
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* From screenshots: deep navy + electric blue */
  --paper: #0B1220;
  --card: #141C2B;
  --card-2: #1A2436;
  --sunken: #0E1624;
  --ink: #FFFFFF;
  --muted: #8B97A8;
  --line: rgba(255, 255, 255, 0.06);
  --line-soft: rgba(255, 255, 255, 0.04);

  --accent: #3B82F6;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --accent-muted: #1E3A5F;

  --warn: #F59E0B;
  --warn-bg: rgba(245, 158, 11, 0.14);
  --danger: #EF4444;
  --danger-soft: rgba(239, 68, 68, 0.18);
  --info: #3B82F6;

  --stage-bg: #060A12;
  --devtools-bg: #141C2B;
  --phone-edge: #1F2937;
  --phone-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);

  --surf-nav: #0A101A;
  --surf-sheet: #141C2B;
  --nav-muted: #6B7A90;
  --nav-on-bg: transparent;

  --badge-bg: rgba(255, 255, 255, 0.08);
  --live-bg: #EF4444;
  --live-ink: #fff;
  --input-bg: #1A2436;
  --chip-bg: #1A2436;

  --hero-bg: #141C2B;
  --hero-border: transparent;
  --hero-live-bg: #1A2436;
  --hero-live-border: rgba(239, 68, 68, 0.35);

  --card-primary-bg: #141C2B;
  --card-primary-border: transparent;
  --levels-bg: #141C2B;
  --levels-border: transparent;
  --levels-kicker: #F59E0B;
  --urgent-bg: #1A1520;
  --urgent-border: rgba(239, 68, 68, 0.35);
  --mentor-chip-bg: #1A2436;
  --row-hover: rgba(255, 255, 255, 0.04);
  --ico-bg: #1E3A5F;

  --verdict-ink: #60A5FA;
  --verdict-bg: rgba(59, 130, 246, 0.16);

  --tone-green: #22C55E;
  --tone-green-bg: #1E3A5F;
  --tone-blue: #60A5FA;
  --tone-blue-bg: #1E3A5F;
  --tone-teal: #38BDF8;
  --tone-teal-bg: #1E3A5F;
  --tone-yellow: #F59E0B;
  --tone-yellow-bg: #1E3A5F;
  --tone-red: #EF4444;
  --tone-red-bg: #1E3A5F;
  --tone-purple: #A78BFA;
  --tone-purple-bg: #1E3A5F;
  --tone-pink: #F472B6;
  --tone-pink-bg: #1E3A5F;

  --toast-bg: #1A2436;
  --toast-ink: #FFFFFF;
  --elev-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px rgba(59, 130, 246, 0.55);

  --pad-x: 16px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
}

/* Devtools on dark stage */
html[data-variant="b"] .devtools {
  color: #E8EEF4;
  border-color: #1F2937;
}
html[data-variant="b"] .devtools .lead,
html[data-variant="b"] .devtools label,
html[data-variant="b"] .hint {
  color: #8B97A8;
}
html[data-variant="b"] .devtools select {
  background: #0E1624;
  border-color: #1F2937;
  color: #E8EEF4;
}
html[data-variant="b"] .chip-row button {
  background: #1A2436;
  border-color: #1F2937;
  color: #E8EEF4;
}
html[data-variant="b"] .chip-row button.on {
  background: #3B82F6;
  border-color: #3B82F6;
  color: #fff;
}