/**
 * QuizWizz design tokens — the single definition site for the `--qw-*` family.
 *
 * QuizWizz already drew with `--qw-*` custom properties, but every surface
 * redefined its own copy, so the same idea had four different values. This file
 * owns them instead:
 *
 * - wp-admin surfaces follow WordPress admin tokens, so a site's admin colour
 *   scheme drives QuizWizz instead of a plugin-specific palette.
 * - Public surfaces inherit the active theme's typography and colour, and derive
 *   neutral surfaces from the inherited colour so a quiz reads correctly on light
 *   and dark themes alike.
 * - A quiz that opts into an explicit style keeps its own palette through the
 *   `[data-theme]` blocks at the end of this file.
 *
 * Component stylesheets consume these tokens. They must not define them, and must
 * not introduce new colour literals.
 */

/* --------------------------------------------------------------------------
 * wp-admin — follow WordPress.
 *
 * Scoped to the QuizWizz admin roots that actually exist in markup, not to
 * `body.wp-admin`: the block editor renders public QuizWizz markup inside
 * wp-admin, and a body-level scope would outrank the public class scope and
 * repaint editor previews with admin colours. The Craft block preview is
 * the exception: it is admin-only chrome (its `save` returns null and the
 * published page is rendered server-side), unlike the Library/Subjects
 * `ServerSideRender` previews which stay on public tokens, so it joins these
 * roots. The Craft block also renders summary and inspector chrome in the
 * block editor (`.qwizz-craft-editor-summary`, `.qwizz-craft-inspector-advanced`),
 * so those nodes are token-rooted as well.
 * `.qwizz-stats` is listed separately because the statistics rail also
 * renders on native screens outside the dashboard document.
 *
 * Fallbacks are the WP core values each token mirrors, so the plugin still
 * renders correctly when a WordPress token is unavailable.
 * -------------------------------------------------------------------------- */
.qwizz-admin,
.qwizz-dashboard,
.qwizz-settings,
.qwizz-admin-editor,
.qwizz-subjects-admin,
.qwizz-import-page,
.qwizz-craft-editor-preview,
.qwizz-craft-editor-summary,
.qwizz-craft-inspector-advanced,
.qwizz-stats {
	--qw-brand: var( --wp-admin-theme-color, #2271b1 );
	--qw-brand-dark: var( --wp-admin-theme-color-darker-10, #135e96 );
	--qw-brand-darker: var( --wp-admin-theme-color-darker-20, #0a4b78 );
	--qw-button-ink: #fff;
	/* Filled-control pair shared with the public block so cross-surface sheets
	 * (icon-only tooltips) can use one token name everywhere. */
	--qw-action-bg: var( --qw-ink );
	--qw-action-ink: var( --qw-paper );

	--qw-ink: #1d2327;
	--qw-muted: #50575e;
	--qw-faint: #646970;
	--qw-disabled: #8c8f94;

	--qw-paper: #fff;
	--qw-card: #fff;
	--qw-soft: #f6f7f7;
	--qw-sunken: #f0f0f1;

	--qw-line: #c3c4c7;
	--qw-line2: #dcdcde;
	--qw-line-strong: #8c8f94;

	--qw-ok: #00a32a;
	--qw-warn: #dba617;
	--qw-bad: #d63638;
	--qw-ok-ink: #12672f;
	--qw-warn-ink: #8a5a00;

	--qw-focus: var( --wp-admin-theme-color, #3858e9 );
	--qw-ring: var( --wp-admin-theme-color, #2271b1 );
	--qw-brand-soft: color-mix( in srgb, var( --qw-brand ) 10%, var( --qw-paper ) );
	--qw-brand-mid: color-mix( in srgb, var( --qw-brand ) 34%, var( --qw-paper ) );
	--qw-shadow-sm: 0 2px 8px color-mix( in srgb, var( --qw-ink ) 12%, transparent );

	--qw-space-1: 4px;
	--qw-space-2: 8px;
	--qw-space-3: 12px;
	--qw-space-4: 16px;

	--qw-font-xs: 0.72rem;
	--qw-font-sm: 0.82rem;

	--qw-admin-line: #dcdcde;
	--qw-admin-muted: #646970;

	--qw-radius-group: 12px;
	--qw-radius-control: 8px;
	--qw-canvas: color-mix(in srgb, var(--qw-line2) 40%, white);

	--qw-radius: 4px;
	--qw-radius-lg: 8px;
	--qw-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
 * Dashboard semantic feedback.
 *
 * The starter notice is the one admin surface that paints a semantic status
 * background and ink, so those four values live here instead of as literals in
 * `assets/css/qwizz-admin-dashboard.css`. They stay off the shared admin root
 * above because that root also covers block-editor Craft chrome, where the
 * public sheets already define their own `--qw-good-bg` / `--qw-bad-bg`.
 * -------------------------------------------------------------------------- */
.qwizz-dashboard {
	--qw-good-bg: #edfaf4;
	--qw-good-ink: #15583c;
	--qw-bad-bg: #fff0f0;
	--qw-bad-ink: #742326;
}

/* --------------------------------------------------------------------------
 * Admin preview action tokens.
 *
 * The settings preview modal is re-parented to `<body>` at runtime and the
 * savebar lives on the settings screen, so both already inherit the admin
 * values above through the `qwizz-admin` body class on owned screens. Their
 * controls reference the public `--qw-v2` / `--qw-action-bg` /
 * `--qw-action-ink` names, which no admin root defines; alias them here to
 * the admin brand values on the narrowest roots that consume them rather
 * than on the shared admin root or a public surface.
 * -------------------------------------------------------------------------- */
.qwizz-preview,
.qwizz-savebar {
	--qw-v2: var( --qw-brand-dark );
	--qw-action-bg: var( --qw-brand );
	--qw-action-ink: var( --qw-button-ink );
}

/* --------------------------------------------------------------------------
 * Public surfaces — follow the site theme.
 *
 * Colour and type are inherited rather than declared. Neutral tones are mixed
 * from the inherited colour, which is what makes the same quiz legible on a
 * light theme and a dark one without QuizWizz guessing a background.
 *
 * `.qwizz-library__empty` is a surface root here because it is the one public
 * fragment that renders with no surface ancestor: the /?qwizz_play=<id> route
 * substitutes the unavailable card straight into the document, where every
 * `var( --qw-… )` in `assets/css/qwizz-empty.css` would otherwise be invalid at
 * computed-value time and its border, background and icon tile would be
 * dropped. It takes the definitions only — the type rule below stays on the
 * surface roots — so the card keeps inheriting its type from whichever
 * surface it sits in when it renders inside one.
 * -------------------------------------------------------------------------- */
.qwizz-builder,
.qwizz-player,
.qwizz-editor,
.qwizz-catalog,
.qwizz-subjects,
.qwizz-user,
.qwizz-library,
.qwizz-library__empty {
	/* Accent: only stable, semantic theme.json slugs. Decorative presets
	 * (numbered accent swatches, vivid colour swatches, …) are off-limits
	 * here: themes are free to put any hue there — Twenty Twenty-Five ships
	 * a yellow in its decorative accents — so they must never drive generic
	 * public icons or accents. With no semantic preset the accent is simply
	 * the inherited text colour, which keeps generic chrome on the page's
	 * own style. Literal QuizWizz palettes live only in the
	 * `.qwizz-player[data-theme=…]` blocks below. */
	--qw-v: var(
		--wp--preset--color--primary,
		var( --wp--style--color--link, currentColor )
	);
	--qw-v2: var(
		--wp--preset--color--secondary,
		var( --qw-v )
	);

	/* Text follows the theme. Filled controls use its known foreground/base pair,
	 * not an arbitrary accent plus fixed white text. Links follow the page's link
	 * colour before any accent. */
	--qw-ink: currentColor;
	--qw-accent-ink: var( --wp--style--color--link, var( --qw-v ) );
	--qw-action-bg: var(
		--wp--preset--color--primary,
		var( --wp--preset--color--contrast, var( --wp--preset--color--foreground, currentColor ) )
	);
	--qw-action-ink: var(
		--wp--preset--color--base,
		var( --wp--preset--color--background, #fff )
	);

	/* Neutral fallbacks for engines without color-mix(); refined just below. */
	--qw-muted: rgba( 127, 127, 127, 0.95 );
	--qw-faint: rgba( 127, 127, 127, 0.75 );
	--qw-line: rgba( 127, 127, 127, 0.28 );
	--qw-line2: rgba( 127, 127, 127, 0.4 );
	--qw-soft: rgba( 127, 127, 127, 0.07 );
	--qw-paper: var(
		--wp--preset--color--base,
		var( --wp--preset--color--background, var( --wp--style--color--background, transparent ) )
	);
	--qw-card: rgba( 127, 127, 127, 0.04 );
	--qw-option: rgba( 127, 127, 127, 0.06 );
	--qw-progress: rgba( 127, 127, 127, 0.16 );
	--qw-neutral: rgba( 127, 127, 127, 0.1 );
	--qw-sunken: rgba( 127, 127, 127, 0.1 );

	/* Semantic feedback keeps deliberate hues; per-quiz themes override them. */
	--qw-ok: #12672f;
	--qw-good: #12672f;
	--qw-good-bg: #edfbf1;
	--qw-bad: #922d2d;
	--qw-bad-bg: #fff0f0;
	--qw-button-ink: #fff;

	--qw-ring: rgba( 127, 127, 127, 0.45 );
	--qw-radius: 12px;
	--qw-radius-lg: 18px;

	/* Spacing scale shared with the admin block (2026-09-14): public surfaces
	 * previously had no spacing tokens, so any var(--qw-space-*) dropped to 0. */
	--qw-space-1: 4px;
	--qw-space-2: 8px;
	--qw-space-3: 12px;
	--qw-space-4: 16px;
	--qw-radius-control: 8px;
	/* qwizz-responsive.css paints every public focus ring with
	 * `outline: 3px solid var(--qw-focus) !important`; without a public
	 * definition that shorthand was invalid and every Builder/Player
	 * keyboard outline computed to none (found 2026-09-14). */
	--qw-focus: var( --qw-v );
}

/* Inherit the theme's type instead of restating a plugin font stack. Surface
 * roots only: the empty card takes the definitions above and not this rule, so
 * its type still comes from the surface it renders in. */
.qwizz-builder,
.qwizz-player,
.qwizz-editor,
.qwizz-catalog,
.qwizz-subjects,
.qwizz-user,
.qwizz-library {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

@supports ( color: color-mix( in srgb, currentColor 10%, transparent ) ) {
	.qwizz-builder,
	.qwizz-player,
	.qwizz-editor,
	.qwizz-catalog,
	.qwizz-subjects,
	.qwizz-library,
	.qwizz-user,
	.qwizz-library__empty {
		--qw-muted: color-mix( in srgb, currentColor 72%, transparent );
		--qw-faint: color-mix( in srgb, currentColor 55%, transparent );
		--qw-line: color-mix( in srgb, currentColor 22%, transparent );
		--qw-line2: color-mix( in srgb, currentColor 34%, transparent );
		--qw-soft: color-mix( in srgb, currentColor 6%, var( --qw-paper ) );
		--qw-card: color-mix( in srgb, currentColor 3%, var( --qw-paper ) );
		--qw-option: color-mix( in srgb, currentColor 5%, var( --qw-paper ) );
		--qw-progress: color-mix( in srgb, currentColor 14%, var( --qw-paper ) );
		--qw-neutral: color-mix( in srgb, currentColor 9%, var( --qw-paper ) );
		--qw-sunken: color-mix( in srgb, currentColor 9%, var( --qw-paper ) );
		--qw-ring: color-mix( in srgb, var( --qw-v ) 24%, transparent );
	}
}

/* --------------------------------------------------------------------------
 * Per-quiz styles.
 *
 * The player sets `data-theme` from the quiz's presentation document. These
 * palettes are intentionally literal: an author choosing "dark" or "retro" for
 * one quiz is opting out of theme inheritance for that quiz only.
 * -------------------------------------------------------------------------- */
.qwizz-player[data-theme="light"],
body[data-qwizz-theme="light"] {
	--qw-v: #6d28d9;
	--qw-v2: #5b21b6;
	--qw-ink: #211d31;
	--qw-muted: #6e6981;
	--qw-line: #e8e4f1;
	--qw-soft: #f5f1ff;
	--qw-card: #fff;
	--qw-option: #fff;
	--qw-progress: #eeeaf5;
	--qw-neutral: #f3f0f8;
}

.qwizz-player[data-theme="dark"],
body[data-qwizz-theme="dark"] {
	--qw-v: #a78bfa;
	--qw-v2: #7c3aed;
	--qw-ink: #f1eff8;
	--qw-muted: #b8b4c4;
	--qw-line: #3a3b46;
	--qw-soft: #2a2439;
	--qw-card: #17181d;
	--qw-option: #22232a;
	--qw-progress: #30313a;
	--qw-good-bg: #173522;
	--qw-good: #a7f3bd;
	--qw-bad-bg: #402020;
	--qw-bad: #fecaca;
	--qw-neutral: #2b2932;
	--qw-button-ink: #17181d;
}

.qwizz-player[data-theme="retro"],
body[data-qwizz-theme="retro"] {
	--qw-v: #b83d2b;
	--qw-v2: #8e2f21;
	--qw-ink: #3b3630;
	--qw-muted: #6f665a;
	--qw-line: #cabd9d;
	--qw-soft: #e4dac0;
	--qw-card: #efe6d0;
	--qw-option: #f6eedc;
	--qw-progress: #d8cbae;
	--qw-neutral: #e4dac0;
}

.qwizz-player[data-theme="cyber"],
body[data-qwizz-theme="cyber"] {
	--qw-v: #f5d90a;
	--qw-v2: #bea900;
	--qw-ink: #eeeaff;
	--qw-muted: #b9afd9;
	--qw-line: #403574;
	--qw-soft: #25204a;
	--qw-card: #0e0b1e;
	--qw-option: #191436;
	--qw-progress: #30285a;
	--qw-good-bg: #153b31;
	--qw-good: #8fffd5;
	--qw-bad-bg: #491f3f;
	--qw-bad: #ffb8dd;
	--qw-neutral: #282244;
	--qw-button-ink: #17120a;
}

.qwizz-player[data-theme="love"],
body[data-qwizz-theme="love"] {
	--qw-v: #c2185b;
	--qw-v2: #9d174d;
	--qw-ink: #4a2b36;
	--qw-muted: #846373;
	--qw-line: #ecc6d4;
	--qw-soft: #f8dfe8;
	--qw-card: #fff1f5;
	--qw-option: #fff8fa;
	--qw-progress: #f0ceda;
	--qw-neutral: #f8dfe8;
}

.qwizz-player[data-theme="aqua"],
body[data-qwizz-theme="aqua"] {
	--qw-v: #0e7490;
	--qw-v2: #155e75;
	--qw-ink: #123a4c;
	--qw-muted: #527989;
	--qw-line: #b9dce7;
	--qw-soft: #d8edf4;
	--qw-card: #eaf7fb;
	--qw-option: #f7fcfe;
	--qw-progress: #c8e4ec;
	--qw-neutral: #d8edf4;
}

/* An explicitly themed quiz owns its own text colour, not the theme's. */
.qwizz-player[data-theme],
body[data-qwizz-theme] {
	color: var( --qw-ink );
	--qw-accent-ink: var( --qw-v );
	--qw-action-bg: var( --qw-v );
	--qw-action-ink: var( --qw-button-ink );
}

/* --------------------------------------------------------------------------
 * Accessibility floors that belong to the token layer.
 * -------------------------------------------------------------------------- */
@media ( forced-colors: active ) {
	.qwizz-builder,
	.qwizz-player,
	.qwizz-player[data-theme],
	body[data-qwizz-theme],
	.qwizz-editor,
	.qwizz-catalog,
	.qwizz-subjects,
	.qwizz-library,
	.qwizz-user,
	.qwizz-library__empty {
		--qw-line: CanvasText;
		--qw-line2: CanvasText;
		--qw-soft: Canvas;
		--qw-card: Canvas;
		--qw-option: Canvas;
		--qw-neutral: Canvas;
		--qw-ink: CanvasText;
		--qw-v: LinkText;
		--qw-accent-ink: LinkText;
		--qw-button-ink: Canvas;
		--qw-action-bg: CanvasText;
		--qw-action-ink: Canvas;
	}
}
/* PHASE G SETTINGS ACCENT START */

/* Settings Phase G uses the product purple as its sole interaction accent inside the Settings surface. */
.qwizz-settings.qwizz-settings--premium {
	--qw-brand: #6d28d9;
	--qw-brand-dark: #5b21b6;
	--qw-brand-darker: color-mix(in srgb, var(--qw-brand-dark) 82%, black);
	--qw-focus: var(--qw-brand);
	--qw-ring: color-mix(in srgb, var(--qw-brand) 28%, transparent);
	--qw-brand-soft: color-mix(in srgb, var(--qw-brand) 9%, var(--qw-card));
	--qw-brand-mid: color-mix(in srgb, var(--qw-brand) 28%, var(--qw-card));
}
/* PHASE G SETTINGS ACCENT END */