/**
 * DATA-VIZ TOKENS
 *
 * Semantic palette for charts, diagrams, and infographics.
 * Used by the mermaid module, drawio SVGs (via post-process), and any
 * future charting/diagram components.
 *
 * Architecture: viz tokens are a thin semantic layer over the theme's
 * base tokens (--fill-*, --ink-*, --accent). Anything that has a base
 * equivalent uses it directly — no bespoke colors. Dark mode "just works"
 * because the base tokens already flip in theme-setup.css.
 *
 * The only NEW values are the data-viz extras (positive, negative,
 * categorical series) — concepts the base palette doesn't carry.
 */


:root {
	/* ===== BASE — pure passthrough to theme tokens ===== */

	--viz-fill: var(--fill-secondary);
	--viz-ink: var(--ink-primary);
	--viz-line: var(--ink-secondary);
	--viz-label-bg: var(--fill-primary);

	/* Neutral — alternate surface within the same family */
	--viz-neutral-fill: var(--fill-auxiliary);
	--viz-neutral-ink: var(--ink-secondary);

	/* Accent — uses theme accent (a soft tint for fill, accent itself for ink) */
	--viz-accent-fill: color-mix(in oklch, var(--accent) 12%, var(--fill-primary));
	--viz-accent-ink: var(--accent);


	/* ===== DATA-VIZ EXTRAS — no base equivalent ===== */

	/* Positive / negative — color-coded states for diagrams */
	--viz-positive-fill: color-mix(in oklch, var(--color-emerald-500) 15%, var(--fill-primary));
	--viz-positive-ink: var(--color-emerald-700);

	--viz-negative-fill: color-mix(in oklch, var(--color-red-500) 15%, var(--fill-primary));
	--viz-negative-ink: var(--color-red-700);

	/* Categorical series — for charts where colors are slots, not meaning */
	--viz-series-1: var(--color-emerald-700);
	--viz-series-2: var(--color-blue-700);
	--viz-series-3: var(--color-amber-700);
	--viz-series-4: var(--color-red-700);
	--viz-series-5: var(--color-purple-700);
	--viz-series-6: var(--color-cyan-700);
	--viz-series-7: var(--color-pink-700);
	--viz-series-8: var(--color-lime-700);


	/* ===== SHAPE / SIZE (theme-invariant) ===== */

	--viz-node-radius: 6px;
	--viz-stroke-width: 2px;
	--viz-edge-stroke-width: 1.5px;
	--viz-font-family: inherit;
	--viz-font-size: 0.9rem;
	--viz-line-height: 1.35;

	--viz-canvas-background: transparent;
	--viz-canvas-padding: 1.5rem;
}


/* ===== DARK MODE — only the data-viz extras need flipping;
       the base tokens (--fill-*, --ink-*, --accent) already flip
       in theme-setup.css, so --viz-fill/--viz-ink/etc. follow. */

/* Paused 2026-05-06: dark mode is chrome-only. Viz tokens follow the
   light base palette regardless of system preference. */

/*
@media (prefers-color-scheme: dark) {
	:root:not([data-scheme='light']) {
		--viz-positive-ink: var(--color-emerald-300);
		--viz-negative-ink: var(--color-red-300);

		--viz-series-1: var(--color-emerald-300);
		--viz-series-2: var(--color-blue-300);
		--viz-series-3: var(--color-amber-300);
		--viz-series-4: var(--color-red-300);
		--viz-series-5: var(--color-purple-300);
		--viz-series-6: var(--color-cyan-300);
		--viz-series-7: var(--color-pink-300);
		--viz-series-8: var(--color-lime-300);
	}
}

:root[data-scheme='dark'] {
	--viz-positive-ink: var(--color-emerald-300);
	--viz-negative-ink: var(--color-red-300);

	--viz-series-1: var(--color-emerald-300);
	--viz-series-2: var(--color-blue-300);
	--viz-series-3: var(--color-amber-300);
	--viz-series-4: var(--color-red-300);
	--viz-series-5: var(--color-purple-300);
	--viz-series-6: var(--color-cyan-300);
	--viz-series-7: var(--color-pink-300);
	--viz-series-8: var(--color-lime-300);
}
*/