/*
 * jab-core-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 or browser @layer
 * support. Works in every browser since 2021 (Chrome 88+, Firefox 78+,
 * Safari 14+).
 *
 * If you see hot pink + Comic Sans on a production site, your child theme
 * isn't loaded or hasn't declared --brand-* in :root yet.
 */

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

	/* Text */
	--brand-text: #111111;
	--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: 32px;
	--brand-text-4xl: 40px;

	/* Spacing */
	--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: 4px;
	--brand-radius-md: 8px;
	--brand-radius-lg: 12px;
	--brand-radius-pill: 999px;

	/* Shadow */
	--brand-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--brand-shadow-md: 0 -2px 8px rgba(0, 0, 0, 0.08);
	--brand-shadow-none: none;
}