: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, var(--reign-site-sections-bg-color, #ffffff));
	--wb-gam-color-text: var(--bx-color-fg, var(--reign-site-body-text-color, #1a1a2e));
	--wb-gam-color-text-muted: color-mix(in srgb, var(--bx-color-fg, var(--reign-site-body-text-color, #1a1a2e)) 70%, var(--bx-color-bg-elevated, var(--reign-site-sections-bg-color, #ffffff)));
	--wb-gam-color-text-light: color-mix(in srgb, var(--bx-color-fg, var(--reign-site-body-text-color, #1a1a2e)) 50%, var(--bx-color-bg-elevated, var(--reign-site-sections-bg-color, #ffffff)));
	--wb-gam-color-border: var(--bx-color-border, var(--reign-site-border-color, #e2e3ed));
	--wb-gam-color-border-hover: var(--bx-color-border, var(--reign-site-border-color, #c8c9d9));
	--wb-gam-color-surface: var(--bx-color-bg-elevated, var(--reign-site-sections-bg-color, #ffffff));
	--wb-gam-color-surface-hover: var(--bx-color-bg-muted, var(--reign-site-secondary-bg-color, #f7f7fb));
	--wb-gam-color-surface-alt: var(--bx-color-bg-muted, var(--reign-site-secondary-bg-color, #f1f5f9));
	--wb-gam-color-page: var(--bx-color-bg-page, var(--reign-site-secondary-bg-color, #f8fafc));
	/* Accent — follows the HOST THEME's link/accent colour before the brand purple.
	   Chain: site-owner override (--wbcom-link-color, from Settings > Appearance)
	   -> BuddyX (--bx-color-accent) -> Reign (--reign-site-button-bg-color) -> brand.
	   Until 1.6.4 the chain stopped at --wbcom-link-color, so on Reign every accent
	   in the plugin (buttons, icon chips, links) rendered brand purple while the
	   rest of the page used Reign's blue — the plugin looked bolted on rather than
	   part of the theme. */
	--wb-gam-color-accent: var(--wbcom-link-color, var(--bx-color-accent, var(--reign-site-button-bg-color, #5b4cdb)));
	--wb-gam-color-accent-hover: var(--wbcom-link-hover-color, var(--bx-color-accent-hover, var(--reign-site-button-bg-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);

	/* League tier accents (cohort rank). These are deliberately literal -- bronze is
	 * bronze -- but they belong here rather than hardcoded inside a block stylesheet.
	 * As tokens the owner can rebrand a tier, and the dark-mode block below can lift
	 * the darker medals so Bronze and Obsidian do not disappear against a dark
	 * surface. Hardcoded in cohort-rank/style.css, they could do neither. */
	--wb-gam-tier-bronze: #b45309;
	--wb-gam-tier-silver: #6b7280;
	--wb-gam-tier-gold: #d97706;
	--wb-gam-tier-diamond: #2563eb;
	--wb-gam-tier-obsidian: #4b5563;
	--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, var(--reign-site-secondary-bg-color, #f9fafb));
	--wb-gam-color-border-strong: var(--bx-color-border, var(--reign-site-border-color, #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 ───────────────────────────────────────────────────────
 * The THEME's accent still wins here. Only the final fallback changes: on a
 * dark surface the brand purple is lightened so glyphs, links, the level
 * progress bar and accent pills keep their punch and contrast.
 *
 * Until 1.6.4 this block set the lightened purple UNCONDITIONALLY — a per-mode
 * internal literal that overrode the whole theme chain. The result: on any dark
 * theme, every accent in the plugin painted brand purple regardless of what the
 * theme's accent was. On Reign (accent #97c0ee, a blue) the plugin's buttons and
 * icon chips came out purple against a blue-accented page, so it read as bolted
 * on rather than part of the theme. A theme-mapped token that a per-mode literal
 * later overwrites is not theme-mapped at all.
 *
 * Chain, unchanged from :root — only the tail differs:
 *   --wbcom-link-color            site-owner override (Settings > Appearance)
 *   --bx-color-accent            BuddyX / BuddyX Pro
 *   --reign-site-button-bg-color Reign (its ACCENT; --reign-site-link-color is
 *                                #ffffff in dark — that is link TEXT, not a brand
 *                                colour, and would give white-on-white buttons)
 *   lightened brand purple       themes exposing no accent token
 *
 * Scoped to the dark selectors the whole Wbcom theme family uses: data-bx-mode
 * (BuddyX, BuddyX Pro AND Reign 8.x all set it), 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 follow automatically. */
:root[data-bx-mode="dark"],
:root[data-theme="dark"],
body.buddyx-dark-theme {
	--wb-gam-color-accent: var(--wbcom-link-color, var(--bx-color-accent, var(--reign-site-button-bg-color, color-mix(in srgb, #5b4cdb 60%, #ffffff))));
	--wb-gam-color-accent-hover: var(--wbcom-link-hover-color, var(--bx-color-accent-hover, var(--reign-site-button-bg-hover-color, color-mix(in srgb, #5b4cdb 45%, #ffffff))));

	/* Lift the dark medals. Bronze (#b45309) and Obsidian (#4b5563) are dark enough to
	 * sink into a dark surface -- the member's own league tier becomes the one thing
	 * they cannot read. Mixing toward white keeps each medal recognisably itself while
	 * restoring contrast. This is only expressible because the tiers are tokens. */
	--wb-gam-tier-bronze: color-mix(in srgb, #b45309 65%, #ffffff);
	--wb-gam-tier-silver: color-mix(in srgb, #6b7280 55%, #ffffff);
	--wb-gam-tier-obsidian: color-mix(in srgb, #4b5563 55%, #ffffff);

	/* The RANK medals needed exactly the same lift and never got it. The league tiers above were
	 * fixed; the rank palette sitting right beside them -- leaderboard positions 1/2/3, the
	 * top-members podium, year-recap -- kept its light-mode values and sank into the dark surface.
	 * Measured against a #161616 surface: silver #6b7280 = 3.74:1, bronze #a0522d = 3.22:1, both
	 * under the 4.5:1 WCAG AA floor. Gold clears it at 5.56:1 and is left as it is. */
	--wb-gam-color-silver: color-mix(in srgb, #6b7280 45%, #ffffff);
	--wb-gam-color-bronze: color-mix(in srgb, #a0522d 50%, #ffffff);
}
@media (prefers-color-scheme: dark) {
	:root[data-bx-mode="auto"] {
		--wb-gam-color-accent: var(--wbcom-link-color, var(--bx-color-accent, var(--reign-site-button-bg-color, color-mix(in srgb, #5b4cdb 60%, #ffffff))));
		--wb-gam-color-accent-hover: var(--wbcom-link-hover-color, var(--bx-color-accent-hover, var(--reign-site-button-bg-hover-color, color-mix(in srgb, #5b4cdb 45%, #ffffff))));

		/* Auto-mode is a dark surface too. Lifting the medals only on the explicit dark
		 * selectors would leave every owner who never touched the toggle reading 3.2:1 bronze. */
		--wb-gam-tier-bronze: color-mix(in srgb, #b45309 65%, #ffffff);
		--wb-gam-tier-silver: color-mix(in srgb, #6b7280 55%, #ffffff);
		--wb-gam-tier-obsidian: color-mix(in srgb, #4b5563 55%, #ffffff);
		--wb-gam-color-silver: color-mix(in srgb, #6b7280 45%, #ffffff);
		--wb-gam-color-bronze: color-mix(in srgb, #a0522d 50%, #ffffff);
	}
}