/*
 * WPDS design tokens, the single source of truth, trimmed to what the blocks
 * actually consume. Color values ported from ui-playground src/styles.css
 * (the light half of its :root token triad: --uip-surface/--uip-text/
 * --uip-border/--uip-muted, plus the modern-blue --wp-admin-theme-color block).
 *
 * Frontend: copied verbatim to assets/design-tokens.css at build time and
 * enqueued on public pages only. Editor iframe: inlined into each block's
 * editorStyle via `@use '../tokens/design-tokens';` in editor.scss, because
 * editorStyle is the path the canvas iframe actually clones.
 *
 * Spacing maps to the active theme's --wp--preset--spacing--* scale so mockups
 * sit in the theme rather than beside it; the px fallback only fires on a site
 * that outputs no presets at all. Colors and radii stay literal: WPDS surfaces
 * are deliberately paper-white regardless of theme palette.
 */
:root {
	--wpds-color-surface: #ffffff;
	--wpds-color-text: #1e1e1e;
	--wpds-color-border: #dcdcde;
	--wpds-radius-m: 8px;
	/*
	 * space-s maps to preset-20 (0.44rem, about 7px on the ci-dev theme): the
	 * nearest preset step to the intended s = m/2 rhythm. preset-30 (0.67rem,
	 * about 10.7px) was considered and rejected: it lands closer to m than to
	 * m/2 and flattens the s-to-m step. The fallback is 7px, matching what the
	 * preset computes to, so the no-preset path can never contradict the
	 * mapping it stands in for (M4 audit, finding 7; the old 8px fallback
	 * disagreed with the preset it shadowed).
	 */
	--wpds-space-s: var(--wp--preset--spacing--20, 7px);
	--wpds-space-m: var(--wp--preset--spacing--40, 16px);
	--wpds-space-l: var(--wp--preset--spacing--50, 24px);
	--wpds-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.08);
	/*
	 * Filled-star color for wpds/stars. Literal like the other colors: the
	 * value is core's long-standing star gold (dashicons star-filled as used
	 * across wp-admin ratings), and no --wpds-color-* rating token exists in
	 * @wordpress/ui 0.20.0 to defer to.
	 */
	--wpds-color-star: #f0b849;
}

/*
 * ----------------------------------------------------------- appearance
 *
 * The shell-wide system | light | dark selection (Daniel, 2026-08-27:
 * "Roll the system | light | dark appearance to the whole shell").
 * Appearance IS token redefinition at a scope: every block consumes
 * var( --wpds-color-*, light-literal ), and a defined token beats its
 * fallback, so defining the full set under a scope re-skins everything
 * inside it. The scopes are core/group block styles (registered by the
 * plugin) so the shell group - or any group - picks its appearance in
 * the editor's Styles panel. Scopes nest and the nearest wins, which is
 * how a committed-light chat stays light inside a dark shell.
 *
 * The light set exists as a CLASS too: committed light pins descendants
 * that would otherwise follow the reader's scheme. --wpds-color-star
 * stays gold in every scheme, like the dashicon it matches.
 */
.is-style-wpds-appearance-light {
	--wpds-color-surface: #ffffff;
	--wpds-color-text: #1e1e1e;
	--wpds-color-border: #dcdcde;
	--wpds-color-background-brand-weak: #f0f3ff;
	--wpds-color-background-interactive-brand-strong: #3858e9;
	--wpds-color-background-interactive-brand-weak: rgba( 56, 88, 233, 0.04 );
	--wpds-color-background-interactive-brand-weak-active: #e7ecfc;
	--wpds-color-background-interactive-error-strong: #cc1818;
	--wpds-color-background-interactive-neutral-strong: #2d2d2d;
	--wpds-color-background-interactive-neutral-weak: transparent;
	--wpds-color-background-interactive-neutral-weak-active: #ededed;
	--wpds-color-background-surface-brand: #ecf0fa;
	--wpds-color-background-surface-error-weak: #fcf0f1;
	--wpds-color-background-surface-info-weak: #f3f9ff;
	--wpds-color-background-surface-neutral-strong: #ffffff;
	--wpds-color-background-surface-neutral-weak: #f4f4f4;
	--wpds-color-foreground-content-brand: #3858e9;
	--wpds-color-foreground-content-error: #cc1818;
	--wpds-color-foreground-content-info: #001b4f;
	--wpds-color-foreground-content-neutral: #1e1e1e;
	--wpds-color-foreground-content-neutral-weak: #707070;
	--wpds-color-foreground-interactive-brand: #3858e9;
	--wpds-color-foreground-interactive-brand-active: #0b0070;
	--wpds-color-foreground-interactive-brand-strong: #ffffff;
	--wpds-color-foreground-interactive-error-strong: #f2efef;
	--wpds-color-foreground-interactive-neutral: #1e1e1e;
	--wpds-color-foreground-interactive-neutral-disabled: #8d8d8d;
	--wpds-color-foreground-interactive-neutral-strong: #f0f0f0;
	--wpds-color-foreground-interactive-neutral-weak: #707070;
	--wpds-color-stroke-alert-error: #cc1818;
	--wpds-color-stroke-focus: #3858e9;
	--wpds-color-stroke-interactive-brand: #3858e9;
	--wpds-color-stroke-interactive-brand-active: #2337c8;
	--wpds-color-stroke-interactive-neutral: #8d8d8d;
	--wpds-color-stroke-interactive-neutral-disabled: #dbdbdb;
	--wpds-color-stroke-surface-brand: #aebcf3;
	--wpds-color-stroke-surface-brand-strong: #3858e9;
	--wpds-color-stroke-surface-error: #cc1818;
	--wpds-color-stroke-surface-info: #a9c6e7;
	--wpds-color-stroke-surface-neutral: #e0e0e0;
	--wpds-color-stroke-surface-neutral-weak: #f0f0f0;
	/*
	 * ------------------------------------------------ the status vocabulary
	 *
	 * These sixteen names are REFERENCED by the blocks and were declared by
	 * nobody in either scope. WordPress core defines fifteen of them, but core's
	 * token file is light-only -- no prefers-color-scheme, no color-scheme --
	 * so they stayed at their light values while everything around them flipped.
	 * That is the whole of "the components do not follow dark mode": the dark
	 * scope was sixteen names short of the vocabulary the CSS already spoke.
	 *
	 * The visible result was a notice block with two of its four statuses dark
	 * and two of them near-white, and an informational badge whose background
	 * stayed #deebfa while its text correctly flipped to #bdd3f2 -- 1.26:1, text
	 * that disappears into its own pill.
	 *
	 * Declared here in LIGHT too, not only in dark. Core supplies these values
	 * today, so this is redundant right now -- but it stops a pinned
	 * -appearance-light subtree from silently diverging the day core changes
	 * them, and it makes the pairs readable side by side.
	 */
	--wpds-color-background-surface-neutral: #fcfcfc;
	--wpds-color-background-surface-error: #f6e6e3;
	--wpds-color-background-surface-info: #deebfa;
	--wpds-color-background-surface-success: #c6f7cd;
	--wpds-color-background-surface-success-weak: #ebffed;
	--wpds-color-background-surface-warning: #fde6be;
	--wpds-color-background-surface-warning-weak: #fff7e1;
	--wpds-color-background-surface-caution: #fee995;
	--wpds-color-foreground-content-success: #002900;
	--wpds-color-foreground-content-success-weak: #008030;
	--wpds-color-foreground-content-warning: #2e1900;
	--wpds-color-foreground-content-warning-weak: #926300;
	--wpds-color-foreground-content-caution: #281d00;
	--wpds-color-foreground-content-error-weak: #cc1818;
	--wpds-color-stroke-surface-success: #94d29e;
	--wpds-color-stroke-surface-warning: #e1bc7c;
	--wpds-color-background-track-neutral: #dbdbdb;
	--wpds-color-background-thumb-brand: #3858e9;
	/*
	 * Defined by NOBODY -- not core, not this file, not any plugin -- so it was
	 * permanently its inline fallback #e0e0e0: a bright white hairline drawn
	 * across the dark sidebar. Aliased rather than renamed at the call sites,
	 * because the file that references it is checked out by another session.
	 */
	--wpds-color-stroke-neutral-weak: var( --wpds-color-stroke-surface-neutral-weak );
	background-color: var( --wpds-color-surface, #ffffff );
	color: var( --wpds-color-foreground-content-neutral, #1e1e1e );
	color-scheme: light;
}

.is-style-wpds-appearance-dark {
	--wpds-color-surface: #1e1e1e;
	--wpds-color-text: #f0f0f1;
	--wpds-color-border: #3c3c3c;
	--wpds-color-background-brand-weak: #232b4d;
	--wpds-color-background-interactive-brand-strong: #3858e9;
	--wpds-color-background-interactive-brand-weak: rgba( 123, 144, 255, 0.08 );
	--wpds-color-background-interactive-brand-weak-active: #2a3763;
	--wpds-color-background-interactive-error-strong: #cc1818;
	--wpds-color-background-interactive-neutral-strong: #f0f0f1;
	--wpds-color-background-interactive-neutral-weak: transparent;
	--wpds-color-background-interactive-neutral-weak-active: #2c2c2e;
	--wpds-color-background-surface-brand: #20263d;
	--wpds-color-background-surface-error-weak: #3a1d1f;
	--wpds-color-background-surface-info-weak: #16222e;
	--wpds-color-background-surface-neutral-strong: #1e1e1e;
	--wpds-color-background-surface-neutral-weak: #2c2c2e;
	--wpds-color-foreground-content-brand: #7b90ff;
	--wpds-color-foreground-content-error: #ff8085;
	--wpds-color-foreground-content-info: #bdd3f2;
	--wpds-color-foreground-content-neutral: #f0f0f1;
	--wpds-color-foreground-content-neutral-weak: #a7aaad;
	--wpds-color-foreground-interactive-brand: #7b90ff;
	--wpds-color-foreground-interactive-brand-active: #9db1ff;
	--wpds-color-foreground-interactive-brand-strong: #ffffff;
	--wpds-color-foreground-interactive-error-strong: #f2efef;
	--wpds-color-foreground-interactive-neutral: #f0f0f1;
	--wpds-color-foreground-interactive-neutral-disabled: #6c7074;
	--wpds-color-foreground-interactive-neutral-strong: #1e1e1e;
	--wpds-color-foreground-interactive-neutral-weak: #9ca0a4;
	--wpds-color-stroke-alert-error: #f86368;
	--wpds-color-stroke-focus: #7b90ff;
	--wpds-color-stroke-interactive-brand: #7b90ff;
	--wpds-color-stroke-interactive-brand-active: #9db1ff;
	--wpds-color-stroke-interactive-neutral: #8d8d8d;
	--wpds-color-stroke-interactive-neutral-disabled: #3c3c3c;
	--wpds-color-stroke-surface-brand: #3a4a80;
	--wpds-color-stroke-surface-brand-strong: #7b90ff;
	--wpds-color-stroke-surface-error: #f86368;
	--wpds-color-stroke-surface-info: #2e4a68;
	--wpds-color-stroke-surface-neutral: #3c3c3c;
	--wpds-color-stroke-surface-neutral-weak: #2c2c2e;
	/*
	 * The dark half of the status vocabulary (see the note in the light scope).
	 * Surfaces follow the register this file already established for info-weak
	 * (#16222e) and error-weak (#3a1d1f); foregrounds follow content-info
	 * (#bdd3f2) and content-error (#ff8085), so a status pill in dark reads as
	 * the same family as the ones that already worked.
	 */
	--wpds-color-background-surface-neutral: #232325;
	--wpds-color-background-surface-error: #4a2325;
	--wpds-color-background-surface-info: #1e3049;
	--wpds-color-background-surface-success: #1c3a24;
	--wpds-color-background-surface-success-weak: #16261a;
	--wpds-color-background-surface-warning: #43331a;
	--wpds-color-background-surface-warning-weak: #2a2113;
	--wpds-color-background-surface-caution: #4a3d12;
	--wpds-color-foreground-content-success: #b5e8c0;
	--wpds-color-foreground-content-success-weak: #6fdd8b;
	--wpds-color-foreground-content-warning: #f2d59b;
	--wpds-color-foreground-content-warning-weak: #e0b45f;
	--wpds-color-foreground-content-caution: #f0dc9a;
	--wpds-color-foreground-content-error-weak: #ff8085;
	--wpds-color-stroke-surface-success: #2f5c3a;
	--wpds-color-stroke-surface-warning: #6b5426;
	--wpds-color-background-track-neutral: #3c3c3c;
	--wpds-color-background-thumb-brand: #7b90ff;
	--wpds-color-stroke-neutral-weak: var( --wpds-color-stroke-surface-neutral-weak );
	background-color: var( --wpds-color-surface, #ffffff );
	color: var( --wpds-color-foreground-content-neutral, #1e1e1e );
	color-scheme: dark;
}

.is-style-wpds-appearance-system {
	background-color: var( --wpds-color-surface, #ffffff );
	color: var( --wpds-color-foreground-content-neutral, #1e1e1e );
	color-scheme: light dark;
}

@media ( prefers-color-scheme: dark ) {
	.is-style-wpds-appearance-system {
		--wpds-color-surface: #1e1e1e;
		--wpds-color-text: #f0f0f1;
		--wpds-color-border: #3c3c3c;
		--wpds-color-background-brand-weak: #232b4d;
		--wpds-color-background-interactive-brand-strong: #3858e9;
		--wpds-color-background-interactive-brand-weak: rgba( 123, 144, 255, 0.08 );
		--wpds-color-background-interactive-brand-weak-active: #2a3763;
		--wpds-color-background-interactive-error-strong: #cc1818;
		--wpds-color-background-interactive-neutral-strong: #f0f0f1;
		--wpds-color-background-interactive-neutral-weak: transparent;
		--wpds-color-background-interactive-neutral-weak-active: #2c2c2e;
		--wpds-color-background-surface-brand: #20263d;
		--wpds-color-background-surface-error-weak: #3a1d1f;
		--wpds-color-background-surface-info-weak: #16222e;
		--wpds-color-background-surface-neutral-strong: #1e1e1e;
		--wpds-color-background-surface-neutral-weak: #2c2c2e;
		--wpds-color-foreground-content-brand: #7b90ff;
		--wpds-color-foreground-content-error: #ff8085;
		--wpds-color-foreground-content-info: #bdd3f2;
		--wpds-color-foreground-content-neutral: #f0f0f1;
		--wpds-color-foreground-content-neutral-weak: #a7aaad;
		--wpds-color-foreground-interactive-brand: #7b90ff;
		--wpds-color-foreground-interactive-brand-active: #9db1ff;
		--wpds-color-foreground-interactive-brand-strong: #ffffff;
		--wpds-color-foreground-interactive-error-strong: #f2efef;
		--wpds-color-foreground-interactive-neutral: #f0f0f1;
		--wpds-color-foreground-interactive-neutral-disabled: #6c7074;
		--wpds-color-foreground-interactive-neutral-strong: #1e1e1e;
		--wpds-color-foreground-interactive-neutral-weak: #9ca0a4;
		--wpds-color-stroke-alert-error: #f86368;
		--wpds-color-stroke-focus: #7b90ff;
		--wpds-color-stroke-interactive-brand: #7b90ff;
		--wpds-color-stroke-interactive-brand-active: #9db1ff;
		--wpds-color-stroke-interactive-neutral: #8d8d8d;
		--wpds-color-stroke-interactive-neutral-disabled: #3c3c3c;
		--wpds-color-stroke-surface-brand: #3a4a80;
		--wpds-color-stroke-surface-brand-strong: #7b90ff;
		--wpds-color-stroke-surface-error: #f86368;
		--wpds-color-stroke-surface-info: #2e4a68;
		--wpds-color-stroke-surface-neutral: #3c3c3c;
		--wpds-color-stroke-surface-neutral-weak: #2c2c2e;
		/*
		 * The dark half of the status vocabulary (see the note in the light scope).
		 * Surfaces follow the register this file already established for info-weak
		 * (#16222e) and error-weak (#3a1d1f); foregrounds follow content-info
		 * (#bdd3f2) and content-error (#ff8085), so a status pill in dark reads as
		 * the same family as the ones that already worked.
		 */
		--wpds-color-background-surface-neutral: #232325;
		--wpds-color-background-surface-error: #4a2325;
		--wpds-color-background-surface-info: #1e3049;
		--wpds-color-background-surface-success: #1c3a24;
		--wpds-color-background-surface-success-weak: #16261a;
		--wpds-color-background-surface-warning: #43331a;
		--wpds-color-background-surface-warning-weak: #2a2113;
		--wpds-color-background-surface-caution: #4a3d12;
		--wpds-color-foreground-content-success: #b5e8c0;
		--wpds-color-foreground-content-success-weak: #6fdd8b;
		--wpds-color-foreground-content-warning: #f2d59b;
		--wpds-color-foreground-content-warning-weak: #e0b45f;
		--wpds-color-foreground-content-caution: #f0dc9a;
		--wpds-color-foreground-content-error-weak: #ff8085;
		--wpds-color-stroke-surface-success: #2f5c3a;
		--wpds-color-stroke-surface-warning: #6b5426;
		--wpds-color-background-track-neutral: #3c3c3c;
		--wpds-color-background-thumb-brand: #7b90ff;
		--wpds-color-stroke-neutral-weak: var( --wpds-color-stroke-surface-neutral-weak );
	}
}

/*
 * Content glue: CORE blocks inside a scope (headings, post titles,
 * dates, pagination) do not consume tokens on their own; these scoped
 * rules hand them the scheme. Deliberately narrow - a bare `a` rule
 * proved too broad, overpainting component links (deck cards) that
 * state their own colors.
 */
.is-style-wpds-appearance-light .wp-block-post-title a,
.is-style-wpds-appearance-dark .wp-block-post-title a,
.is-style-wpds-appearance-system .wp-block-post-title a {
	color: var( --wpds-color-foreground-content-neutral, #1e1e1e );
}

.is-style-wpds-appearance-light .wp-block-post-date,
.is-style-wpds-appearance-dark .wp-block-post-date,
.is-style-wpds-appearance-system .wp-block-post-date {
	color: var( --wpds-color-foreground-content-neutral-weak, #707070 );
}

.is-style-wpds-appearance-light .wp-block-post-excerpt a,
.is-style-wpds-appearance-dark .wp-block-post-excerpt a,
.is-style-wpds-appearance-system .wp-block-post-excerpt a,
.is-style-wpds-appearance-light .wp-block-query-pagination a,
.is-style-wpds-appearance-dark .wp-block-query-pagination a,
.is-style-wpds-appearance-system .wp-block-query-pagination a {
	color: var( --wpds-color-foreground-interactive-brand, #3858e9 );
}

.is-style-wpds-appearance-light h1, .is-style-wpds-appearance-light h2, .is-style-wpds-appearance-light h3, .is-style-wpds-appearance-light h4, .is-style-wpds-appearance-light h5, .is-style-wpds-appearance-light h6,
.is-style-wpds-appearance-dark h1, .is-style-wpds-appearance-dark h2, .is-style-wpds-appearance-dark h3, .is-style-wpds-appearance-dark h4, .is-style-wpds-appearance-dark h5, .is-style-wpds-appearance-dark h6,
.is-style-wpds-appearance-system h1, .is-style-wpds-appearance-system h2, .is-style-wpds-appearance-system h3, .is-style-wpds-appearance-system h4, .is-style-wpds-appearance-system h5, .is-style-wpds-appearance-system h6 {
	color: var( --wpds-color-foreground-content-neutral, #1e1e1e );
}