: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 (tuned to match assets/css/hub.css `--gam-*` family) */
	--wb-gam-color-white: #ffffff;
	--wb-gam-color-text: #1a1a2e;
	--wb-gam-color-text-muted: #555770;
	--wb-gam-color-text-light: #8b8da3;
	--wb-gam-color-border: #e2e3ed;
	--wb-gam-color-border-hover: #c8c9d9;
	--wb-gam-color-surface: #ffffff;
	--wb-gam-color-surface-hover: #f7f7fb;
	--wb-gam-color-surface-alt: #f1f5f9;
	--wb-gam-color-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);
	--wb-gam-color-accent-light: #ededfc;
	--wb-gam-color-accent-text: #4338b2;
	--wb-gam-color-accent-ring: rgba(91, 76, 219, 0.2);

	/* Colors — semantic (matched to assets/css/hub.css) */
	--wb-gam-color-success: #0d9f6e;
	--wb-gam-color-success-bg: #ecfdf3;
	--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: #fef7ec;
	--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: #fef2f2;
	--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: #eff4ff;
	--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. */
	--wb-gam-color-surface-muted: #f9fafb;
	--wb-gam-color-border-strong: #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);
}