/*
 * OSBS SalesFlow Theme — design tokens.
 * `--osbs-primary` is overridden at runtime by the CRM brand color setting.
 */
:root {
	/* Sky-blue, airy palette (0.37.0, user reference): ice-blue page, white rounded cards. */
	--osbs-brand: #2b7fd4;
	--osbs-primary: #2b7fd4;
	--osbs-primary-strong: color-mix(in srgb, var(--osbs-primary) 78%, #000);
	--osbs-primary-soft: color-mix(in srgb, var(--osbs-primary) 9%, #fff);
	--osbs-primary-contrast: #ffffff;

	--osbs-bg: #f5f9fe;
	--osbs-surface: #ffffff;
	--osbs-surface-2: #f0f6fd;
	--osbs-surface-3: #e4eef9;
	--osbs-surface-alt: #f5f9fe;
	--osbs-border: #dfeaf6;
	--osbs-border-strong: #c6d7ea;
	--osbs-text: #17304d;
	--osbs-text-muted: #5a7190;
	--osbs-text-subtle: #8ea3bb;

	/* Solid tag colors (white text, WCAG AA contrast). */
	--osbs-tag-blue: #3565ec;
	--osbs-tag-purple: #8a4ac2;
	--osbs-tag-magenta: #c2338a;
	--osbs-tag-pink: #d62e67;
	--osbs-tag-red: #d12727;
	--osbs-tag-orange: #c24f00;
	--osbs-tag-green: #2e7d4f;
	--osbs-tag-gray: #5b6678;

	--osbs-success: #2e7d4f;
	--osbs-success-soft: #e7f3ec;
	--osbs-warning: #a44a00;
	--osbs-warning-soft: #fdf0e3;
	--osbs-danger: #c0262d;
	--osbs-danger-soft: #fceceb;
	--osbs-info: #3565ec;
	--osbs-info-soft: #ebf0fe;
	--osbs-neutral-soft: #e9edf4;

	--osbs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--osbs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--osbs-fs-xs: 0.75rem;
	--osbs-fs-sm: 0.8125rem;
	--osbs-fs-md: 0.9375rem;
	--osbs-fs-lg: 1.125rem;
	--osbs-fs-xl: 1.5rem;
	--osbs-fs-2xl: 1.875rem;

	--osbs-space-1: 4px;
	--osbs-space-2: 8px;
	--osbs-space-3: 12px;
	--osbs-space-4: 16px;
	--osbs-space-5: 20px;
	--osbs-space-6: 24px;
	--osbs-space-8: 32px;

	--osbs-radius-sm: 6px;
	--osbs-radius: 8px;
	--osbs-radius-lg: 18px;
	--osbs-radius-pill: 999px;

	--osbs-shadow-sm: 0 6px 18px -14px rgba(43, 127, 212, 0.35);
	--osbs-shadow: 0 10px 28px -18px rgba(43, 127, 212, 0.4), 0 1px 2px rgba(23, 48, 77, 0.04);
	--osbs-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16);

	--osbs-sidebar-w: 248px;
	--osbs-topbar-h: 60px;
	--osbs-focus: 0 0 0 3px color-mix(in srgb, var(--osbs-primary) 35%, transparent);
	--osbs-ease: cubic-bezier(0.2, 0, 0, 1);
}


/*
 * Dark mode (0.20.0). The CRM plugin sets data-theme on <html> from each user's choice:
 * "dark", "light", or "system" (= follow the device setting).
 */
:root[data-theme="dark"] {
	color-scheme: dark;
	/* Brand made a little lighter so links and buttons stay readable on dark surfaces. */
	--osbs-primary: color-mix(in srgb, var(--osbs-brand, #2453d4) 80%, #fff);
	--osbs-primary-strong: color-mix(in srgb, var(--osbs-primary) 82%, #fff);
	--osbs-primary-soft: color-mix(in srgb, var(--osbs-primary) 20%, #161d28);
	--osbs-primary-contrast: #ffffff;

	--osbs-bg: #0f141c;
	--osbs-surface: #161d28;
	--osbs-surface-2: #1c2532;
	--osbs-surface-3: #2a3446;
	--osbs-surface-alt: #19212d;
	--osbs-border: #2b3546;
	--osbs-border-strong: #3d4a5e;
	--osbs-text: #e8edf5;
	--osbs-text-muted: #a9b4c6;
	--osbs-text-subtle: #7c879a;

	--osbs-success: #5cbf8a;
	--osbs-success-soft: #1b3125;
	--osbs-warning: #eb9b4f;
	--osbs-warning-soft: #3b2a18;
	--osbs-danger: #f07474;
	--osbs-danger-soft: #3f2020;
	--osbs-info: #86a5ff;
	--osbs-info-soft: #1f2843;
	--osbs-neutral-soft: #2a3446;

	--osbs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--osbs-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
	--osbs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] {
		color-scheme: dark;
		/* Brand made a little lighter so links and buttons stay readable on dark surfaces. */
		--osbs-primary: color-mix(in srgb, var(--osbs-brand, #2453d4) 80%, #fff);
		--osbs-primary-strong: color-mix(in srgb, var(--osbs-primary) 82%, #fff);
		--osbs-primary-soft: color-mix(in srgb, var(--osbs-primary) 20%, #161d28);
		--osbs-primary-contrast: #ffffff;

		--osbs-bg: #0f141c;
		--osbs-surface: #161d28;
		--osbs-surface-2: #1c2532;
		--osbs-surface-3: #2a3446;
		--osbs-surface-alt: #19212d;
		--osbs-border: #2b3546;
		--osbs-border-strong: #3d4a5e;
		--osbs-text: #e8edf5;
		--osbs-text-muted: #a9b4c6;
		--osbs-text-subtle: #7c879a;

		--osbs-success: #5cbf8a;
		--osbs-success-soft: #1b3125;
		--osbs-warning: #eb9b4f;
		--osbs-warning-soft: #3b2a18;
		--osbs-danger: #f07474;
		--osbs-danger-soft: #3f2020;
		--osbs-info: #86a5ff;
		--osbs-info-soft: #1f2843;
		--osbs-neutral-soft: #2a3446;

		--osbs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
		--osbs-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
		--osbs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root { --osbs-ease: linear; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}