/* ── BPMN SDK brand tokens ───────────────────────────────────────────────────
 * Light-first. Dark override via [data-theme="dark"] on any ancestor.
 * All --bpmnkit-* variables are public API — safe to override for white-labeling.
 * ─────────────────────────────────────────────────────────────────────────── */

:root {
	--bpmnkit-bg: #f4f4f8;
	--bpmnkit-surface: #ffffff;
	--bpmnkit-surface-2: #eeeef8;
	--bpmnkit-border: #d0d0e8;
	--bpmnkit-fg: #1a1a2e;
	--bpmnkit-fg-muted: #6666a0;
	--bpmnkit-font: system-ui, -apple-system, sans-serif;
	--bpmnkit-font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", monospace;

	/* Brand accent — purple-blue */
	--bpmnkit-accent: #1a56db;
	--bpmnkit-accent-bright: #3b82f6;
	--bpmnkit-accent-subtle: rgba(26, 86, 219, 0.12);
	--bpmnkit-accent-fg: #ffffff;

	/* Secondary accent */
	--bpmnkit-teal: #0d9488;

	/* Status */
	--bpmnkit-success: #16a34a;
	--bpmnkit-warn: #d97706;
	--bpmnkit-danger: #dc2626;

	/* Floating panels (HUD, dropdowns, pickers) */
	--bpmnkit-panel-bg: rgba(255, 255, 255, 0.92);
	--bpmnkit-panel-border: rgba(0, 0, 0, 0.08);

	/* Spacing / shape */
	--bpmnkit-radius: 6px;
	--bpmnkit-radius-sm: 4px;
	--bpmnkit-radius-lg: 10px;

	/* Nav sidebar — always dark regardless of theme */
	--bpmnkit-nav-bg: #1a1a2e;
	--bpmnkit-nav-fg: #9090b4;
	--bpmnkit-nav-fg-active: #ffffff;
	--bpmnkit-nav-width: 220px;
	--bpmnkit-header-height: 52px;
}

[data-theme="dark"] {
	--bpmnkit-bg: #0d0d16;
	--bpmnkit-surface: #161626;
	--bpmnkit-surface-2: #1e1e2e;
	--bpmnkit-border: #2a2a42;
	--bpmnkit-fg: #cdd6f4;
	--bpmnkit-fg-muted: #8888a8;

	--bpmnkit-accent: #6b9df7;
	--bpmnkit-accent-bright: #89b4fa;
	--bpmnkit-accent-subtle: rgba(107, 157, 247, 0.15);

	--bpmnkit-teal: #2dd4bf;
	--bpmnkit-success: #22c55e;
	--bpmnkit-warn: #f59e0b;
	--bpmnkit-danger: #f87171;

	--bpmnkit-panel-bg: rgba(13, 13, 22, 0.92);
	--bpmnkit-panel-border: rgba(255, 255, 255, 0.08);

	--bpmnkit-nav-bg: #0a0a14;
	--bpmnkit-nav-fg: #8888a8;
}

[data-theme="neon"] {
	--bpmnkit-bg: oklch(11% 0.025 270);
	--bpmnkit-surface: oklch(15% 0.025 270);
	--bpmnkit-surface-2: oklch(19% 0.03 270);
	--bpmnkit-border: oklch(65% 0.24 280 / 0.18);
	--bpmnkit-fg: oklch(88% 0.02 270);
	--bpmnkit-fg-muted: oklch(60% 0.04 270);

	--bpmnkit-accent: oklch(65% 0.22 280);
	--bpmnkit-accent-bright: oklch(76% 0.16 280);
	--bpmnkit-accent-subtle: oklch(65% 0.22 280 / 0.15);
	--bpmnkit-accent-fg: oklch(95% 0.01 270);

	--bpmnkit-teal: oklch(72% 0.18 185);
	--bpmnkit-success: oklch(72% 0.18 145);
	--bpmnkit-warn: oklch(75% 0.17 75);
	--bpmnkit-danger: oklch(65% 0.22 25);

	--bpmnkit-panel-bg: oklch(13% 0.03 270 / 0.96);
	--bpmnkit-panel-border: oklch(65% 0.24 280 / 0.18);

	--bpmnkit-nav-bg: oklch(8% 0.025 270);
	--bpmnkit-nav-fg: oklch(55% 0.06 270);
}