/*
	Shared design tokens for the extension. Loaded first by every HTML entrypoint (sidepanel, settings,
	dev harness) so all three surfaces draw from one source of truth.

	Two tiers:
	- Primitive palette: raw values named by hue/scale, carry no meaning. Never referenced by components.
	- Semantic roles: what components reference. A role maps to one primitive; deduplicated so each
	  meaning (success, warning, error, accent) has exactly one colour.
*/
:root {
	/* --- tier 1: primitive palette --- */
	--gray-950: #1a1a1a;
	--gray-850: #242424;
	--gray-800: #2a2a2a;
	--gray-700: #333;
	--gray-650: #444;
	--gray-600: #555;
	--gray-400: #888;
	--gray-200: #e2e2e2;
	--white: #fff;

	--blue-bright: #2563eb;
	--blue-muted: #3b4a6b;
	--blue-deep: #1e2433;

	--green-600: #16a34a;
	--amber-500: #f59e0b;

	--red-400: #f87171;
	--red-900: #2a1a1a;
	--red-700: #7f2020;

	/* --- tier 2: semantic roles --- */
	--color-bg: var(--gray-950);
	--color-bg-elevated: var(--gray-850);
	--color-bg-user: var(--gray-800);

	--color-border: var(--gray-700);
	--color-border-strong: var(--gray-600);
	--color-border-muted: var(--gray-650);

	--color-text: var(--gray-200);
	--color-text-muted: var(--gray-400);

	--color-accent: var(--blue-bright);
	--color-accent-contrast: var(--white);
	--color-accent-bg: var(--blue-deep);
	--color-accent-border: var(--blue-muted);

	--color-success: var(--green-600);
	--color-warning: var(--amber-500);

	--color-error: var(--red-400);
	--color-error-bg: var(--red-900);
	--color-error-border: var(--red-700);

	--color-neutral: var(--gray-600);

	/* --- spacing scale --- */
	--space-1: 2px;
	--space-2: 4px;
	--space-3: 6px;
	--space-4: 8px;
	--space-5: 12px;
	--space-6: 16px;

	/* --- radii --- */
	--radius-small: 4px;
	--radius-bubble: 6px;

	/* --- font sizes --- */
	--font-size-small: 12px;
	--font-size-base: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 20px;
}