:root {
	/* Spacing scale (used by SpacingControl) */
	--wb-gam-space-0: 0;
	--wb-gam-space-xs: 4px;
	--wb-gam-space-sm: 8px;
	--wb-gam-space-md: 16px;
	--wb-gam-space-lg: 24px;
	--wb-gam-space-xl: 32px;
	--wb-gam-space-2xl: 48px;
	--wb-gam-space-3xl: 64px;

	/* Border radius scale (md/lg tuned to match assets/css/hub.css) */
	--wb-gam-radius-none: 0;
	--wb-gam-radius-sm: 6px;
	--wb-gam-radius-md: 10px;
	--wb-gam-radius-lg: 14px;
	--wb-gam-radius-xl: 18px;
	--wb-gam-radius-full: 9999px;

	/* Shadow presets (sm/md tuned to match assets/css/hub.css — softer than Tailwind defaults) */
	--wb-gam-shadow-none: none;
	--wb-gam-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--wb-gam-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--wb-gam-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.10);
	--wb-gam-shadow-xl: 0 20px 32px rgba(0, 0, 0, 0.12);

	/* Typography scale */
	--wb-gam-font-xs: 12px;
	--wb-gam-font-sm: 14px;
	--wb-gam-font-md: 16px;
	--wb-gam-font-lg: 18px;
	--wb-gam-font-xl: 20px;
	--wb-gam-font-2xl: 24px;
	--wb-gam-font-3xl: 30px;
	--wb-gam-font-4xl: 36px;
	--wb-gam-font-5xl: 48px;

	/* Font weights */
	--wb-gam-weight-normal: 400;
	--wb-gam-weight-medium: 500;
	--wb-gam-weight-semibold: 600;
	--wb-gam-weight-bold: 700;

	/* Line heights */
	--wb-gam-leading-tight: 1.25;
	--wb-gam-leading-normal: 1.5;
	--wb-gam-leading-relaxed: 1.75;

	/* Colors — neutral palette. Mapped to the host theme's color tokens so
	 * the plugin follows the theme's light/dark mode automatically. BuddyX
	 * and BuddyX Pro expose `--bx-color-*` and flip them under
	 * :root[data-bx-mode="dark"] (and prefers-color-scheme); consuming those
	 * here means cards/text/borders go dark with the theme. Any theme that
	 * doesn't define `--bx-color-*` falls back to the original light values,
	 * so behaviour is unchanged off the BuddyX family. Only NEUTRALS map to
	 * the theme — brand/semantic colors (accent, success, fire, medals) stay
	 * constant across modes. Muted/light text use color-mix so they keep a
	 * readable contrast against whichever surface the theme provides. */
	--wb-gam-color-white: var(--bx-color-bg-elevated, #ffffff);
	--wb-gam-color-text: var(--bx-color-fg, #1a1a2e);
	--wb-gam-color-text-muted: color-mix(in srgb, var(--bx-color-fg, #1a1a2e) 70%, var(--bx-color-bg-elevated, #ffffff));
	--wb-gam-color-text-light: color-mix(in srgb, var(--bx-color-fg, #1a1a2e) 50%, var(--bx-color-bg-elevated, #ffffff));
	--wb-gam-color-border: var(--bx-color-border, #e2e3ed);
	--wb-gam-color-border-hover: var(--bx-color-border, #c8c9d9);
	--wb-gam-color-surface: var(--bx-color-bg-elevated, #ffffff);
	--wb-gam-color-surface-hover: var(--bx-color-bg-muted, #f7f7fb);
	--wb-gam-color-surface-alt: var(--bx-color-bg-muted, #f1f5f9);
	--wb-gam-color-page: var(--bx-color-bg-page, #f8fafc);
	/* Accent — defaults match `--gam-accent` from assets/css/hub.css so
	   new standard blocks visually align with the existing hub UI.
	   Themes may override via `--wbcom-link-color`. */
	--wb-gam-color-accent: var(--wbcom-link-color, #5b4cdb);
	--wb-gam-color-accent-hover: var(--wbcom-link-hover-color, #4338b2);
	/* Tint backgrounds (icon chips, accent pills) are mixed OVER the theme
	 * surface so they're a faint light tint in light mode and a faint dark
	 * tint in dark mode — no opaque light blob on a dark card. */
	--wb-gam-color-accent-light: color-mix(in srgb, var(--wb-gam-color-accent) 14%, var(--wb-gam-color-surface));
	/* Accent label text blends toward the foreground so it stays readable on
	 * the tinted chip in either mode. */
	--wb-gam-color-accent-text: color-mix(in srgb, var(--wb-gam-color-accent) 65%, var(--wb-gam-color-text));
	--wb-gam-color-accent-ring: rgba(91, 76, 219, 0.2);

	/* Colors — semantic. The solid hue stays constant; the `-bg` tint is
	 * mixed over the theme surface so status chips / podium rows / pills
	 * adapt to dark mode instead of showing an opaque light blob. (The
	 * `-soft` rgba variants were already surface-agnostic.) */
	--wb-gam-color-success: #0d9f6e;
	--wb-gam-color-success-bg: color-mix(in srgb, var(--wb-gam-color-success) 12%, var(--wb-gam-color-surface));
	--wb-gam-color-success-strong: #047857;
	--wb-gam-color-success-soft: rgba(13, 159, 110, 0.12);
	--wb-gam-color-warning: #c2770e;
	--wb-gam-color-warning-bg: color-mix(in srgb, var(--wb-gam-color-warning) 12%, var(--wb-gam-color-surface));
	--wb-gam-color-warning-strong: #b45309;
	--wb-gam-color-warning-soft: rgba(245, 158, 11, 0.15);
	--wb-gam-color-danger: #ef4444;
	--wb-gam-color-danger-bg: color-mix(in srgb, var(--wb-gam-color-danger) 12%, var(--wb-gam-color-surface));
	--wb-gam-color-danger-strong: #b91c1c;
	--wb-gam-color-danger-soft: rgba(185, 28, 28, 0.10);
	--wb-gam-color-info: #2563eb;
	--wb-gam-color-info-bg: color-mix(in srgb, var(--wb-gam-color-info) 12%, var(--wb-gam-color-surface));
	--wb-gam-color-info-soft: rgba(37, 99, 235, 0.10);

	/* Extra neutrals — surface-muted is the "card lifted off a panel"
	 * shade. Border-strong is the focus / hover stroke. Theme-mapped (see
	 * the neutral palette note above). */
	--wb-gam-color-surface-muted: var(--bx-color-bg-muted, #f9fafb);
	--wb-gam-color-border-strong: var(--bx-color-border, #d1d5db);
	--wb-gam-color-locked-soft: rgba(156, 163, 175, 0.16);
	--wb-gam-color-primary-soft: rgba(91, 76, 219, 0.10);

	/* Accent variants tied to per-block accent (fire, gold-soft). */
	--wb-gam-color-fire: #f59e0b;
	--wb-gam-color-fire-light: #f97316;
	--wb-gam-color-fire-strong: #b45309;
	--wb-gam-color-fire-soft: rgba(245, 158, 11, 0.15);
	--wb-gam-color-fire-gradient: linear-gradient(90deg, #f97316 0%, #f59e0b 100%);

	/* Streak heatmap — 4 intensity steps of the primary accent (purple
	 * family). Cell-0 is the empty state (border-strength), 1→4 ramps
	 * from soft to deepest. Kept distinct from the regular primary
	 * palette so heatmap legibility doesn't depend on theme accent. */
	--wb-gam-color-heatmap-0: var(--wb-gam-color-border);
	--wb-gam-color-heatmap-1: #c4b5fd;
	--wb-gam-color-heatmap-2: #a78bfa;
	--wb-gam-color-heatmap-3: #7c3aed;
	--wb-gam-color-heatmap-4: #4c1d95;

	/* Rank/medal palette (used by leaderboard, top-members, year-recap) */
	--wb-gam-color-gold: #b8860b;
	--wb-gam-color-silver: #6b7280;
	--wb-gam-color-bronze: #a0522d;

	/* Interaction states */
	--wb-gam-color-disabled: var(--wb-gam-color-surface-alt);
	--wb-gam-color-disabled-text: var(--wb-gam-color-text-light);
	--wb-gam-color-focus: #ffd54a;

	/* Responsive breakpoints (used by CSS generation utility) */
	--wb-gam-bp-tablet: 1024px;
	--wb-gam-bp-mobile: 767px;

	/* Transition */
	--wb-gam-transition-fast: 150ms ease;
	--wb-gam-transition-normal: 300ms ease;
	--wb-gam-transition-slow: 500ms ease;

	/* Z-index scale */
	--wb-gam-z-below: -1;
	--wb-gam-z-base: 0;
	--wb-gam-z-above: 1;
	--wb-gam-z-dropdown: 10;
	--wb-gam-z-overlay: 100;
	--wb-gam-z-modal: 1000;

	/* ── Shorthand aliases ──────────────────────────────────────────
	 * Per-block stylesheets in src/Blocks/<slug>/style.css consume
	 * these short names. Defined here (not frontend.css) so the
	 * `wb-gam-tokens` handle is sufficient — blocks no longer depend
	 * on the legacy `wb-gamification` (frontend.css) bundle being
	 * enqueued. */
	--wb-gam-primary: var(--wb-gam-color-accent);
	--wb-gam-primary-light: var(--wb-gam-color-accent-light);
	--wb-gam-primary-text: var(--wb-gam-color-accent-text);
	--wb-gam-text: var(--wb-gam-color-text);
	--wb-gam-text-secondary: var(--wb-gam-color-text-muted);
	--wb-gam-text-muted: var(--wb-gam-color-text-light);
	--wb-gam-border: var(--wb-gam-color-border);
	--wb-gam-card-bg: var(--wb-gam-color-surface);
	--wb-gam-card-bg-hover: var(--wb-gam-color-surface-hover);
	--wb-gam-radius: var(--wb-gam-radius-md);
	--wb-gam-radius-card: var(--wb-gam-radius-md);
	--wb-gam-shadow: var(--wb-gam-shadow-sm);
	--wb-gam-shadow-hover: var(--wb-gam-shadow-md);
	--wb-gam-gap: var(--wb-gam-space-md);
	--wb-gam-transition: var(--wb-gam-transition-fast);
	--wb-gam-gold: var(--wb-gam-color-gold);
	--wb-gam-silver: var(--wb-gam-color-silver);
	--wb-gam-bronze: var(--wb-gam-color-bronze);
	--wb-gam-fill: var(--wb-gam-color-accent);
	--wb-gam-recap-accent: var(--wb-gam-color-accent);
}

/* ── Dark-mode accent ───────────────────────────────────────────────────────
 * Keep the gamification brand purple, but lighten it on dark surfaces so
 * glyphs, links, the level progress bar, and accent pills keep their punch
 * and contrast. Light mode uses the pure hue defined in :root above. Scoped
 * to the same dark selectors BuddyX / BuddyX Pro use: the data-bx-mode
 * attribute, the prefers-color-scheme auto path, and the legacy
 * .buddyx-dark-theme body class. accent-light / accent-text cascade from
 * --wb-gam-color-accent, so they lighten with it automatically. */
:root[data-bx-mode="dark"],
body.buddyx-dark-theme {
	--wb-gam-color-accent: color-mix(in srgb, #5b4cdb 60%, #ffffff);
	--wb-gam-color-accent-hover: color-mix(in srgb, #5b4cdb 45%, #ffffff);
}
@media (prefers-color-scheme: dark) {
	:root[data-bx-mode="auto"] {
		--wb-gam-color-accent: color-mix(in srgb, #5b4cdb 60%, #ffffff);
		--wb-gam-color-accent-hover: color-mix(in srgb, #5b4cdb 45%, #ffffff);
	}
}