/*
 * Chart tokens for the Custom UI - Charts family, in the WordPress
 * design system's own vocabulary. Every --wpds-chart-* token DEFERS to a
 * system token - --wpds-color-* from the design-tokens set, or a core
 * --wp--preset--color-* palette preset - with that token's light
 * literal as the fallback, so the charts follow the shell wherever the
 * system tokens are defined and still stand alone where they are not
 * (the --wpds-color-star precedent: component tokens in the system's
 * namespace).
 *
 * The series ramp is our brand plus a categorical ramp on --wpds-*
 * tokens, per the porting directive: brand blue leads (it flips to the
 * dark-brand #7b90ff inside dark scopes, exactly as the system's own
 * brand token does), then the star gold (documented to stay gold in
 * every scheme), the success green and the error red from the wpds
 * status set - the error slot on the -weak token, because the bare
 * content-error token is the #470000 ink shade and #cc1818 is what
 * content-error-weak resolves to, measured on dk1-studio 2026-09-02 when the
 * candlestick's down candles came out near-black (@wordpress/ui ships those names; the local sheet's dark
 * literals stand in where it lacks them - #00a32a is core's own alert
 * green, one step brighter for dark surfaces). Purple, orange and cyan
 * have no wpds hue, so those slots take core Gutenberg palette presets
 * unchanged in both schemes rather than invented values. Only the
 * brand slot moves between schemes - a ramp that holds still across
 * light and dark removes a whole class of dark-mode bug.
 *
 * Frontend: copied verbatim to assets/chart-tokens.css at build time
 * (npm run sync:tokens) and enqueued on public pages. Editor iframe:
 * inlined into each block's editorStyle via @use in editor.scss, because
 * editorStyle is the path the canvas iframe actually clones.
 */
:root {
	--wpds-chart-font: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
	--wpds-chart-series-1: var(--wpds-color-foreground-interactive-brand, #3858e9);
	--wpds-chart-series-2: var(--wpds-color-star, #f0b849);
	--wpds-chart-series-3: var(--wpds-color-foreground-content-success-weak, #008030);
	--wpds-chart-series-4: var(--wpds-color-foreground-content-error-weak, #cc1818);
	--wpds-chart-series-5: var(--wp--preset--color--vivid-purple, #9b51e0);
	--wpds-chart-series-6: var(--wp--preset--color--luminous-vivid-orange, #ff6900);
	--wpds-chart-series-7: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
	--wpds-chart-primary: var(--wpds-color-foreground-interactive-brand, #3858e9);
	--wpds-chart-track: var(--wpds-color-border, #dcdcde);
	--wpds-chart-border: var(--wpds-color-border, #dcdcde);
	--wpds-chart-text: var(--wpds-color-text, #1e1e1e);
	--wpds-chart-text-weak: var(--wpds-color-foreground-content-neutral-weak, #707070);
	--wpds-chart-axis: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	--wpds-chart-grid: var(--wpds-color-stroke-surface-neutral, #e0e0e0);
	--wpds-chart-surface: var(--wpds-color-surface, #ffffff);
	--wpds-chart-tooltip-surface: var(--wpds-color-background-surface-neutral-strong, #ffffff);
}

/*
 * Committed light: pins descendants that would otherwise follow the
 * reader's scheme, the same contract as the wpds light class.
 */
.is-style-wpds-appearance-light {
	--wpds-chart-series-1: var(--wpds-color-foreground-interactive-brand, #3858e9);
	--wpds-chart-series-2: var(--wpds-color-star, #f0b849);
	--wpds-chart-series-3: var(--wpds-color-foreground-content-success-weak, #008030);
	--wpds-chart-series-4: var(--wpds-color-foreground-content-error-weak, #cc1818);
	--wpds-chart-series-5: var(--wp--preset--color--vivid-purple, #9b51e0);
	--wpds-chart-series-6: var(--wp--preset--color--luminous-vivid-orange, #ff6900);
	--wpds-chart-series-7: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
	--wpds-chart-primary: var(--wpds-color-foreground-interactive-brand, #3858e9);
	--wpds-chart-track: var(--wpds-color-border, #dcdcde);
	--wpds-chart-border: var(--wpds-color-border, #dcdcde);
	--wpds-chart-text: var(--wpds-color-text, #1e1e1e);
	--wpds-chart-text-weak: var(--wpds-color-foreground-content-neutral-weak, #707070);
	--wpds-chart-axis: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	--wpds-chart-grid: var(--wpds-color-stroke-surface-neutral, #e0e0e0);
	--wpds-chart-surface: var(--wpds-color-surface, #ffffff);
	--wpds-chart-tooltip-surface: var(--wpds-color-background-surface-neutral-strong, #ffffff);
}

/*
 * Dark: the system tokens these defer to flip on their own when the
 * wpds set is loaded; the scoped fallbacks keep the charts correct on a
 * site that loads only this file.
 */
.is-style-wpds-appearance-dark {
	--wpds-chart-series-1: var(--wpds-color-foreground-interactive-brand, #7b90ff);
	--wpds-chart-series-2: var(--wpds-color-star, #f0b849);
	--wpds-chart-series-3: var(--wpds-color-foreground-content-success-weak, #00a32a);
	--wpds-chart-series-4: var(--wpds-color-foreground-content-error, #ff8085);
	--wpds-chart-series-5: var(--wp--preset--color--vivid-purple, #9b51e0);
	--wpds-chart-series-6: var(--wp--preset--color--luminous-vivid-orange, #ff6900);
	--wpds-chart-series-7: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
	--wpds-chart-primary: var(--wpds-color-foreground-interactive-brand, #7b90ff);
	--wpds-chart-track: var(--wpds-color-border, #3c3c3c);
	--wpds-chart-border: var(--wpds-color-border, #3c3c3c);
	--wpds-chart-text: var(--wpds-color-text, #f0f0f1);
	--wpds-chart-text-weak: var(--wpds-color-foreground-content-neutral-weak, #a7aaad);
	--wpds-chart-axis: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	--wpds-chart-grid: var(--wpds-color-stroke-surface-neutral, #3c3c3c);
	--wpds-chart-surface: var(--wpds-color-surface, #1e1e1e);
	--wpds-chart-tooltip-surface: var(--wpds-color-background-surface-neutral-weak, #2c2c2e);
}

@media (prefers-color-scheme: dark) {
	.is-style-wpds-appearance-system {
		--wpds-chart-series-1: var(--wpds-color-foreground-interactive-brand, #7b90ff);
		--wpds-chart-series-2: var(--wpds-color-star, #f0b849);
		--wpds-chart-series-3: var(--wpds-color-foreground-content-success-weak, #00a32a);
		--wpds-chart-series-4: var(--wpds-color-foreground-content-error, #ff8085);
		--wpds-chart-series-5: var(--wp--preset--color--vivid-purple, #9b51e0);
		--wpds-chart-series-6: var(--wp--preset--color--luminous-vivid-orange, #ff6900);
		--wpds-chart-series-7: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
		--wpds-chart-primary: var(--wpds-color-foreground-interactive-brand, #7b90ff);
		--wpds-chart-track: var(--wpds-color-border, #3c3c3c);
		--wpds-chart-border: var(--wpds-color-border, #3c3c3c);
		--wpds-chart-text: var(--wpds-color-text, #f0f0f1);
		--wpds-chart-text-weak: var(--wpds-color-foreground-content-neutral-weak, #a7aaad);
		--wpds-chart-axis: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
		--wpds-chart-grid: var(--wpds-color-stroke-surface-neutral, #3c3c3c);
		--wpds-chart-surface: var(--wpds-color-surface, #1e1e1e);
		--wpds-chart-tooltip-surface: var(--wpds-color-background-surface-neutral-weak, #2c2c2e);
	}
}