/*
 * qot-blocks - token fallbacks.
 *
 * Wrapped in :where(:root) so plugin defaults have specificity (0,0,0). Any
 * child-theme :root declaration sits at (0,1,0) and wins on pure specificity,
 * regardless of stylesheet enqueue order. Works in every browser since 2021.
 *
 * These values are intentionally garish. If you see hot pink and Comic Sans on
 * a production QoT page, the qot-theme child is not loaded or has not declared
 * --brand-* in :root yet. Rule 1 of the CSS contract: the THEME owns token
 * values; the plugin never hardcodes a brand colour into block CSS.
 */

:where(:root) {
	/* Brand colour tokens - garish fallbacks scream "missing child theme". */
	--brand-primary: #ff00ff;
	--brand-primary-dark: #cc00cc;
	--brand-accent: #ff1493;
	--brand-emphasis: #ff4500;
	--brand-success: #00ff7f;
	--brand-success-text: #00cc66;
	--brand-warning: #ffd700;

	/* Text */
	--brand-text: #111111;
	--brand-text-body: #222222;
	--brand-text-muted: #555555;
	--brand-text-on-dark: #ffffff;
	--brand-text-on-dark-muted: #cccccc;

	/* Surfaces */
	--brand-surface: #ffffff;
	--brand-bg-light: #fff0f6;
	--brand-bg-callout: #ffdbe9;
	--brand-bg-page: #fff5f9;

	/* Borders */
	--brand-border: #ffb6e0;
	--brand-border-strong: #ff69b4;

	/* Accents */
	--brand-rating-star: #ffd700;
	--brand-pullquote-bg: #fff5f9;

	/* Typography - intentionally garish so QA catches missing declarations. */
	--brand-font-display: 'Comic Sans MS', 'Brush Script MT', cursive;
	--brand-font-body: 'Comic Sans MS', 'Brush Script MT', cursive;
	--brand-font-weight-body: 400;
	--brand-font-weight-semibold: 600;
	--brand-font-weight-bold: 700;
	--brand-line-height-display: 1.2;
	--brand-line-height-body: 1.5;
	--brand-line-height-callout: 1.7;

	/* Type scale */
	--brand-text-xs: 12px;
	--brand-text-sm: 14px;
	--brand-text-base: 16px;
	--brand-text-lg: 18px;
	--brand-text-xl: 20px;
	--brand-text-2xl: 24px;
	--brand-text-3xl: 36px;
	--brand-text-4xl: 48px;

	/* Spacing (4px base) */
	--brand-space-1: 4px;
	--brand-space-2: 8px;
	--brand-space-3: 12px;
	--brand-space-4: 16px;
	--brand-space-5: 24px;
	--brand-space-6: 32px;
	--brand-space-7: 48px;
	--brand-space-8: 64px;

	/* Radius */
	--brand-radius-sm: 6px;
	--brand-radius-md: 10px;
	--brand-radius-lg: 18px;
	--brand-radius-pill: 999px;

	/* Shadows */
	--brand-shadow-sm: 0 1px 2px rgba(14, 31, 58, .06);
	--brand-shadow-md: 0 2px 8px rgba(14, 31, 58, .08), 0 1px 2px rgba(14, 31, 58, .04);
	--brand-shadow-none: none;
}