/* tofupilot brand system — Tailwind CSS v4 palette — September 2026 */
:root {
  /* Exact published Tailwind v4 values; this export also works without Tailwind. */
  --tofupilot-neutral-100: oklch(97% 0 none);
  --tofupilot-neutral-200: oklch(92.2% 0 none);
  --tofupilot-neutral-300: oklch(87% 0 none);
  --tofupilot-neutral-400: oklch(70.8% 0 none);
  --tofupilot-neutral-500: oklch(55.6% 0 none);
  --tofupilot-neutral-600: oklch(43.9% 0 none);
  --tofupilot-neutral-700: oklch(37.1% 0 none);
  --tofupilot-neutral-800: oklch(26.9% 0 none);
  --tofupilot-sky-50: oklch(97.7% 0.013 236.62);
  --tofupilot-sky-100: oklch(95.1% 0.026 236.824);
  --tofupilot-sky-200: oklch(90.1% 0.058 230.902);
  --tofupilot-sky-300: oklch(82.8% 0.111 230.318);
  --tofupilot-sky-400: oklch(74.6% 0.16 232.661);
  --tofupilot-sky-500: oklch(68.5% 0.169 237.323);
  --tofupilot-sky-600: oklch(58.8% 0.158 241.966);
  --tofupilot-sky-700: oklch(50% 0.134 242.749);
  --tofupilot-sky-800: oklch(44.3% 0.11 240.79);
  --tofupilot-sky-900: oklch(39.1% 0.09 240.876);
  --tofupilot-amber-400: oklch(82.8% 0.189 84.429);
  --tofupilot-primary: var(--tofupilot-neutral-800);
  --tofupilot-secondary: var(--tofupilot-sky-500);
  --tofupilot-active: var(--tofupilot-sky-700);
  --tofupilot-active-dark: var(--tofupilot-sky-400);
  --tofupilot-illustration-accent: var(--tofupilot-amber-400);
  --tofupilot-graphite: var(--tofupilot-neutral-800);
  --tofupilot-paper: var(--tofupilot-neutral-100);
  --tofupilot-white: #ffffff;
  --tofupilot-ui-background: #ffffff;
  --tofupilot-ui-surface: var(--tofupilot-neutral-100);
  --tofupilot-ui-text: var(--tofupilot-neutral-800);
  --tofupilot-ui-muted: var(--tofupilot-neutral-600);
  --tofupilot-ui-border: var(--tofupilot-neutral-300);
  --tofupilot-ui-action: var(--tofupilot-neutral-800);
  --tofupilot-ui-on-action: var(--tofupilot-neutral-100);
  --tofupilot-ui-plot-band: var(--tofupilot-neutral-100);
  --tofupilot-ui-plot-line: var(--tofupilot-neutral-400);
  --tofupilot-ui-plot-limit: #be185d;
  --tofupilot-pass-core: #84cc16;
  --tofupilot-pass-text: #4d7c0f;
  --tofupilot-pass-surface: #f7fee7;
  --tofupilot-pass-chart: #4d7c0f;
  --tofupilot-fail-core: #ec4899;
  --tofupilot-fail-text: #be185d;
  --tofupilot-fail-surface: #fdf2f8;
  --tofupilot-fail-chart: #be185d;
  --tofupilot-error-core: #ef4444;
  --tofupilot-error-text: #b91c1c;
  --tofupilot-error-surface: #fef2f2;
  --tofupilot-error-chart: #b91c1c;
  --tofupilot-timeout-core: #f97316;
  --tofupilot-timeout-text: #c2410c;
  --tofupilot-timeout-surface: #fff7ed;
  --tofupilot-timeout-chart: #c2410c;
  --tofupilot-aborted-core: #eab308;
  --tofupilot-aborted-text: #a16207;
  --tofupilot-aborted-surface: #fefce8;
  --tofupilot-aborted-chart: #a16207;
  --tofupilot-skip-core: #64748b;
  --tofupilot-skip-text: #475569;
  --tofupilot-skip-surface: #f1f5f9;
  --tofupilot-skip-chart: #475569;
  --tofupilot-unset-core: #6b7280;
  --tofupilot-unset-text: #4b5563;
  --tofupilot-unset-surface: #f3f4f6;
  --tofupilot-unset-chart: #4b5563;
  --tofupilot-running-core: #3b82f6;
  --tofupilot-running-text: #1d4ed8;
  --tofupilot-running-surface: #eff6ff;
  --tofupilot-running-chart: #1d4ed8;
  --tofupilot-input-core: #8b5cf6;
  --tofupilot-input-text: #6d28d9;
  --tofupilot-input-surface: #f5f3ff;
  --tofupilot-input-chart: #6d28d9;
  --tofupilot-sans: Archivo, Arial, sans-serif;
  --tofupilot-mono: 'IBM Plex Mono', monospace;
  --tofupilot-radius-panel: 0px;
  --tofupilot-radius-control: 4px;
  --tofupilot-space-unit: 4px;
  --tofupilot-gutter: 24px;
}
.outcome-dark,
.dashboard-dark,
[data-tofupilot-theme='dark'] {
  --tofupilot-ui-background: var(--tofupilot-neutral-800);
  --tofupilot-ui-surface: var(--tofupilot-neutral-700);
  --tofupilot-ui-text: var(--tofupilot-neutral-100);
  --tofupilot-ui-muted: var(--tofupilot-neutral-400);
  --tofupilot-ui-border: var(--tofupilot-neutral-600);
  --tofupilot-ui-action: var(--tofupilot-neutral-100);
  --tofupilot-ui-on-action: var(--tofupilot-neutral-800);
  --tofupilot-ui-plot-band: var(--tofupilot-neutral-700);
  --tofupilot-ui-plot-line: var(--tofupilot-neutral-500);
  --tofupilot-ui-plot-limit: #f9a8d4;
  --tofupilot-pass-text: #bef264;
  --tofupilot-pass-surface: #1d2918;
  --tofupilot-pass-chart: #bef264;
  --tofupilot-fail-text: #f9a8d4;
  --tofupilot-fail-surface: #351f2d;
  --tofupilot-fail-chart: #f9a8d4;
  --tofupilot-error-text: #fca5a5;
  --tofupilot-error-surface: #351f22;
  --tofupilot-error-chart: #fca5a5;
  --tofupilot-timeout-text: #fdba74;
  --tofupilot-timeout-surface: #34251b;
  --tofupilot-timeout-chart: #fdba74;
  --tofupilot-aborted-text: #fde047;
  --tofupilot-aborted-surface: #302b19;
  --tofupilot-aborted-chart: #fde047;
  --tofupilot-skip-text: #cbd5e1;
  --tofupilot-skip-surface: #252a33;
  --tofupilot-skip-chart: #cbd5e1;
  --tofupilot-unset-text: #d1d5db;
  --tofupilot-unset-surface: #292a2e;
  --tofupilot-unset-chart: #d1d5db;
  --tofupilot-running-text: #93c5fd;
  --tofupilot-running-surface: #1c2940;
  --tofupilot-running-chart: #93c5fd;
  --tofupilot-input-text: #c4b5fd;
  --tofupilot-input-surface: #2c2340;
  --tofupilot-input-chart: #c4b5fd;
}
.outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--tofupilot-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}
.outcome-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.outcome-pass {
  color: var(--tofupilot-pass-text);
  background: var(--tofupilot-pass-surface);
}
.outcome-fail {
  color: var(--tofupilot-fail-text);
  background: var(--tofupilot-fail-surface);
}
.outcome-error {
  color: var(--tofupilot-error-text);
  background: var(--tofupilot-error-surface);
}
.outcome-timeout {
  color: var(--tofupilot-timeout-text);
  background: var(--tofupilot-timeout-surface);
}
.outcome-aborted {
  color: var(--tofupilot-aborted-text);
  background: var(--tofupilot-aborted-surface);
}
.outcome-skip {
  color: var(--tofupilot-skip-text);
  background: var(--tofupilot-skip-surface);
}
.outcome-unset {
  color: var(--tofupilot-unset-text);
  background: var(--tofupilot-unset-surface);
}
.outcome-running {
  color: var(--tofupilot-running-text);
  background: var(--tofupilot-running-surface);
}
.outcome-input {
  color: var(--tofupilot-input-text);
  background: var(--tofupilot-input-surface);
}