/* Ohevai Brain — semantic tokens layered on the Classical design system.
   Primitive values come from _ds/classical/styles.css (--color-*, --font-*, --space-*, --radius-*, --shadow-*).
   Everything the product UI touches goes through an --ob-* alias so light/dark can swap without touching screens. */
:root {
  /* surfaces */
  --ob-bg: var(--color-bg);
  --ob-surface: #faf8f6;
  --ob-surface-2: var(--color-surface);
  --ob-field: #1c1a18;            /* Living Brain deep field (a shade below neutral-900) */
  --ob-field-ink: #ece8e2;
  --ob-field-rule: rgba(236,232,226,.18);
  /* text */
  --ob-text: var(--color-text);
  --ob-text-2: var(--color-neutral-700);
  --ob-text-3: var(--color-neutral-600);
  --ob-text-inverse: #f3f2f2;
  /* lines */
  --ob-border: var(--color-divider);
  --ob-border-strong: var(--color-neutral-400);
  --ob-border-focus: var(--color-accent);
  /* brand / action */
  --ob-accent: var(--color-accent);
  --ob-accent-ink: var(--color-accent-700);
  --ob-accent-tint: var(--color-accent-100);
  --ob-accent-hover: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --ob-accent-press: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --ob-row-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
  --ob-disabled-opacity: .45;
  /* status — OKLCH on the Classical lightness scale; stroke/ink/tint only, never a filled block */
  --ob-positive: oklch(0.60 0.10 150);
  --ob-positive-ink: oklch(0.40 0.09 150);
  --ob-positive-tint: oklch(0.96 0.03 150);
  --ob-info: oklch(0.58 0.08 240);
  --ob-info-ink: oklch(0.40 0.08 240);
  --ob-info-tint: oklch(0.95 0.02 240);
  --ob-warning: oklch(0.66 0.14 55);
  --ob-warning-ink: oklch(0.44 0.12 55);
  --ob-warning-tint: oklch(0.96 0.03 65);
  --ob-danger: oklch(0.58 0.15 25);
  --ob-danger-ink: oklch(0.42 0.13 25);
  --ob-danger-tint: oklch(0.96 0.03 25);
  --ob-neutral: var(--color-neutral-500);
  --ob-neutral-ink: var(--color-neutral-700);
  --ob-neutral-tint: var(--color-neutral-100);
  --ob-stale: var(--color-neutral-600);          /* + dashed border */
  --ob-unknown: var(--color-neutral-500);        /* + dotted border */
  --ob-disconnected: var(--ob-danger-ink);       /* + dashed border */
  /* modes */
  --ob-mode-live: var(--ob-positive);
  --ob-mode-live-ink: var(--ob-positive-ink);
  --ob-mode-replay: var(--ob-info);
  --ob-mode-replay-ink: var(--ob-info-ink);
  --ob-mode-sim: var(--ob-warning);
  --ob-mode-sim-ink: var(--ob-warning-ink);
  /* type */
  --ob-font-display: var(--font-heading);
  --ob-font-body: var(--font-body);
  --ob-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ob-fs-body: 16px; --ob-fs-label: 14px; --ob-fs-meta: 13px; --ob-fs-kicker: 12px;
  --ob-fs-h1: 40px; --ob-fs-h2: 28px; --ob-fs-h3: 21px; --ob-fs-display: 64px;
  --ob-lh-body: 1.55; --ob-lh-tight: 1.15;
  --ob-tracking-kicker: .1em;
  /* layout */
  --ob-content-max: 1360px; --ob-reading-max: 68ch;
  --ob-sidebar-w: 248px; --ob-drawer-w: 420px; --ob-topbar-h: 56px;
  --ob-gutter: var(--space-6);
  --ob-bp-tablet: 1024px; --ob-bp-mobile: 390px; --ob-bp-min: 320px;
  /* shape & depth */
  --ob-radius: var(--radius-md); --ob-radius-lg: var(--radius-lg); --ob-radius-sm: var(--radius-sm);
  --ob-border-w: 1px;
  --ob-shadow-1: var(--shadow-sm); --ob-shadow-2: var(--shadow-md); --ob-shadow-3: var(--shadow-lg);
  --ob-z-drawer: 40; --ob-z-dialog: 50; --ob-z-toast: 60; --ob-z-nav: 30;
  /* motion */
  --ob-dur-fast: 120ms; --ob-dur-base: 200ms; --ob-dur-slow: 420ms; --ob-dur-pulse: 1800ms;
  --ob-ease: cubic-bezier(.2,.7,.2,1);
  --ob-focus: 2px solid var(--color-accent);
  color-scheme: light;
}
[data-theme="dark"] {
  --ob-bg: #1b1a18; --ob-surface: #232120; --ob-surface-2: #2c2a27;
  --ob-field: #121110; --ob-field-ink: #ece8e2; --ob-field-rule: rgba(236,232,226,.16);
  --ob-text: #ece8e2; --ob-text-2: var(--color-neutral-300); --ob-text-3: var(--color-neutral-400); --ob-text-inverse: #201f1d;
  --ob-border: rgba(236,232,226,.16); --ob-border-strong: var(--color-neutral-600);
  --ob-accent: var(--color-accent-400); --ob-accent-ink: var(--color-accent-300); --ob-accent-tint: oklch(0.30 0.04 75);
  --ob-accent-hover: color-mix(in srgb, var(--color-accent-400) 14%, transparent);
  --ob-accent-press: color-mix(in srgb, var(--color-accent-400) 24%, transparent);
  --ob-row-hover: rgba(236,232,226,.05);
  --ob-positive: oklch(0.74 0.10 150); --ob-positive-ink: oklch(0.82 0.09 150); --ob-positive-tint: oklch(0.28 0.04 150);
  --ob-info: oklch(0.72 0.08 240); --ob-info-ink: oklch(0.82 0.07 240); --ob-info-tint: oklch(0.28 0.03 240);
  --ob-warning: oklch(0.76 0.13 60); --ob-warning-ink: oklch(0.84 0.11 70); --ob-warning-tint: oklch(0.30 0.05 60);
  --ob-danger: oklch(0.70 0.14 25); --ob-danger-ink: oklch(0.80 0.11 25); --ob-danger-tint: oklch(0.28 0.05 25);
  --ob-neutral: var(--color-neutral-400); --ob-neutral-ink: var(--color-neutral-300); --ob-neutral-tint: #2c2a27;
  --ob-stale: var(--color-neutral-400); --ob-unknown: var(--color-neutral-500); --ob-disconnected: var(--ob-danger-ink);
  --ob-shadow-1: 0 0 0 1px rgba(236,232,226,.08); --ob-shadow-2: 0 0 0 1px rgba(236,232,226,.1), 0 6px 20px rgba(0,0,0,.5);
  --ob-shadow-3: 0 0 0 1px rgba(236,232,226,.12), 0 18px 48px rgba(0,0,0,.6);
  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--ob-bg); color: var(--ob-text); }
[data-theme="dark"] .card, [data-theme="dark"] .table td, [data-theme="dark"] .table th, [data-theme="dark"] .input, [data-theme="dark"] .seg, [data-theme="dark"] .seg-opt + .seg-opt, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .nav { border-color: var(--ob-border); }
[data-theme="dark"] .btn, [data-theme="dark"] .input { color: var(--ob-text); }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-ghost, [data-theme="dark"] a, [data-theme="dark"] .card-kicker { color: var(--ob-accent); }
[data-theme="dark"] .btn-primary { border-color: var(--ob-accent); }
[data-theme="dark"] .tag-neutral { background: var(--ob-neutral-tint); color: var(--ob-text-2); }
[data-theme="dark"] .tag-accent { background: var(--ob-accent-tint); color: var(--ob-accent-ink); }
[data-theme="dark"] .dialog { background: var(--ob-surface); }
[data-theme="dark"] .table tbody tr:hover { background: var(--ob-row-hover); }
[data-theme="dark"] .field > label, [data-theme="dark"] .table th, [data-theme="dark"] .text-muted, [data-theme="dark"] .card-meta { color: var(--ob-text-2); }
@media (prefers-reduced-motion: reduce) { :root { --ob-dur-fast: 0ms; --ob-dur-base: 0ms; --ob-dur-slow: 0ms; --ob-dur-pulse: 0ms; } }