/* ========================================
   BLT Events - Skeleton mode
   ========================================

   Loads after blt-events-tokens.css and re-points every token at the
   variables your framework already defines, so the plugin inherits the
   site's palette, radii, shadows and type instead of shipping its own.
   Layout and structure stay exactly as they are — only the look changes.

   Each token walks a fallback chain: the framework's variable first, then
   a more generic name, then the plugin's own baked value last. So this file
   is safe on a site with no framework at all — nothing goes unstyled, it
   simply falls through to the defaults.

   The chains below are aimed at Automatic.css (ACSS) with common generic
   names behind it. To target a different framework, redefine the tokens in
   your own stylesheet: yours load later and win, and you only have to name
   the ones that differ.
   ---------------------------------------- */

:root {
	/* --- Brand --- */
	--blt-e-primary: var(--primary, var(--action, var(--wp--preset--color--primary, #6366f1)));
	--blt-e-primary-hover: var(--primary-hover, var(--primary-dark, var(--action-hover, #4f46e5)));
	--blt-e-primary-tint: var(--primary-ultra-light, var(--primary-light, #f0f0ff));
	--blt-e-on-primary: var(--primary-contrast, var(--white, #ffffff));

	--blt-e-link: var(--link-color, var(--primary, #6366f1));
	--blt-e-link-hover: var(--link-color-hover, var(--primary-hover, #4f46e5));

	/* --- Text --- */
	--blt-e-fg-strong: var(--heading-color, var(--h1-color, var(--text-dark, #111827)));
	--blt-e-fg: var(--text-color, var(--body-color, var(--text, #1f2937)));
	--blt-e-fg-soft: var(--text-color, var(--body-color, #374151));
	--blt-e-fg-muted: var(--text-muted, var(--neutral-medium, var(--base-dark, #6b7280)));
	--blt-e-fg-subtle: var(--text-subtle, var(--neutral-light, var(--base-medium, #9ca3af)));

	/* --- Surfaces --- */
	/* No --base-ultra-light fallback here: ACSS's neutral ramp is a gray
	   scale, not white, and that name is already what --blt-e-surface-alt
	   resolves to below — sharing it would collapse "white card" and
	   "subtle tint" into the same color. */
	--blt-e-surface: var(--card-background, var(--white, #ffffff));
	--blt-e-surface-alt: var(--base-ultra-light, var(--neutral-ultra-light, #f9fafb));
	--blt-e-surface-sunken: var(--base-light, var(--neutral-light, #f3f4f6));
	/* ACSS's --base-light is a much bigger step down from --base-ultra-light
	   than our own surface-alt/-sunken pair (#d9d8d8 vs #f2f2f2 — roughly
	   4x the contrast of Styled mode's #f3f4f6 vs #f9fafb), too heavy for
	   a full-panel background even though it's the right choice for
	   smaller recessed elements. Use surface-alt's subtler tone instead. */
	--blt-e-checkout-bg: var(--blt-e-surface-alt);

	/* --- Lines --- */
	--blt-e-border: var(--border-color, var(--base-light, #e5e7eb));
	--blt-e-border-strong: var(--border-color-dark, var(--base-medium, #d1d5db));
	--blt-e-border-subtle: var(--border-color, rgba(0, 0, 0, 0.12));

	/* --- Status --- */
	--blt-e-success: var(--success, #059669);
	--blt-e-success-bg: var(--success-bg, #f0fdf4);
	--blt-e-success-border: var(--success-border, #bbf7d0);
	--blt-e-danger: var(--danger, var(--error, #dc2626));
	--blt-e-danger-bg: var(--danger-bg, #fef2f2);
	--blt-e-danger-border: var(--danger-border, #fecaca);
	--blt-e-warning: var(--warning, #92400e);
	--blt-e-warning-bg: var(--warning-bg, #fffbeb);
	--blt-e-warning-border: var(--warning-border, #fde68a);

	/* --- Shape --- */
	--blt-e-radius-xs: var(--radius-xs, 4px);
	--blt-e-radius-sm: var(--radius-s, 8px);
	--blt-e-radius: var(--radius-m, 16px);
	--blt-e-radius-lg: var(--radius-l, 32px);

	/* --- Depth --- */
	--blt-e-shadow-sm: var(--box-shadow-s, var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08)));
	--blt-e-shadow: var(--box-shadow-m, var(--shadow, 0 4px 6px rgba(0, 0, 0, 0.07)));
	--blt-e-shadow-lg: var(--box-shadow-l, var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.1)));

	/* --- Type --- */
	/* `inherit` last, not a stack: in skeleton mode the site's own body font
	   is the right answer when the framework names no variable. */
	--blt-e-font: var(--body-font, var(--font-body, inherit));
	--blt-e-font-heading: var(--heading-font, var(--font-heading, var(--body-font, inherit)));

	/* --- Spacing and type scale (single event page) --- */
	--blt-e-space-xs: var(--space-xs, clamp(1.1256rem, 1.0500rem + 0.2099vw, 1.3333rem));
	--blt-e-space-s: var(--space-s, clamp(1.5004rem, 1.3187rem + 0.5047vw, 2rem));
	--blt-e-space-m: var(--space-m, clamp(2rem, 1.6364rem + 1.0101vw, 3rem));
	--blt-e-space-l: var(--space-l, clamp(2.666rem, 1.9991rem + 1.8525vw, 4.5rem));
	--blt-e-space-xl: var(--space-xl, clamp(3.5538rem, 2.3915rem + 3.2285vw, 6.75rem));
	--blt-e-space-xxl: var(--space-xxl, clamp(4.7372rem, 2.778rem + 5.4422vw, 10.125rem));
	--blt-e-content-gap: var(--content-gap, var(--blt-e-space-m));
	--blt-e-grid-gap: var(--grid-gap, var(--blt-e-space-m));
	--blt-e-section-space-xs: var(--section-space-xs, clamp(2.2511rem, 1.1303rem + 3.1133vw, 5.3333rem));
	--blt-e-section-space-s: var(--section-space-s, clamp(3.0008rem, 1.1828rem + 5.0497vw, 8rem));
	--blt-e-section-space-m: var(--section-space-m, clamp(4rem, 1.0909rem + 8.0808vw, 12rem));
	--blt-e-section-space-l: var(--section-space-l, clamp(5.332rem, 0.7255rem + 12.796vw, 18rem));
	--blt-e-section-space-xl: var(--section-space-xl, clamp(7.1076rem, -0.1261rem + 20.0934vw, 27rem));
	--blt-e-section-space-xxl: var(--section-space-xxl, clamp(9.4744rem, -1.8077rem + 31.339vw, 40.5rem));
	--blt-e-section-padding-x: var(--section-padding-x, var(--blt-e-space-m));
	--blt-e-gutter: var(--gutter, var(--blt-e-space-m));
	--blt-e-text-xs: var(--text-xs, clamp(1.4rem, 1.3273rem + 0.2020vw, 1.6rem));
	--blt-e-text-s: var(--text-s, clamp(1.6rem, 1.5273rem + 0.2020vw, 1.8rem));
	--blt-e-text-m: var(--text-m, clamp(2rem, 1.8545rem + 0.4040vw, 2.4rem));
	--blt-e-text-l: var(--text-l, clamp(2.4rem, 2.1091rem + 0.8081vw, 3.2rem));
	--blt-e-text-xl: var(--text-xl, clamp(3rem, 2.3455rem + 1.8182vw, 4.8rem));
	--blt-e-text-xxl: var(--text-xxl, clamp(3.6rem, 2.5455rem + 2.9293vw, 6.5rem));

	/* --- Neutrals (single event page) --- */
	--blt-e-neutral: var(--neutral, var(--blt-e-fg-strong));
	--blt-e-neutral-light: var(--neutral-light, var(--blt-e-border));
	--blt-e-neutral-ultra-light: var(--neutral-ultra-light, var(--blt-e-surface-sunken));
	--blt-e-neutral-semi-light: var(--neutral-semi-light, var(--blt-e-fg-muted));
	--blt-e-neutral-semi-dark: var(--neutral-semi-dark, var(--blt-e-fg-soft));
	--blt-e-divider: var(--black-trans-20, rgba(0, 0, 0, 0.2));
	--blt-e-chip-bg: var(--neutral-trans-10, rgba(17, 24, 39, 0.1));
	--blt-e-chip-bg-hover: var(--neutral-trans-20, rgba(17, 24, 39, 0.2));

	/* --- Layout --- */
	--blt-e-content-width: var(--content-width, var(--width-content, 1350px));
}

/* Where color-mix() is supported, tint the chips from the framework's own
   neutral instead of the baked grey (ACSS transparencies still win). */
@supports (color: color-mix(in oklch, red 10%, transparent)) {
	:root {
		--blt-e-chip-bg: var(--neutral-trans-10, color-mix(in oklch, var(--blt-e-neutral) 10%, transparent));
		--blt-e-chip-bg-hover: var(--neutral-trans-20, color-mix(in oklch, var(--blt-e-neutral) 20%, transparent));
		--blt-e-divider: var(--black-trans-20, color-mix(in oklch, var(--black, #000) 20%, transparent));

		--blt-e-success-bg: var(--success-bg, color-mix(in oklch, var(--blt-e-success) 8%, transparent));
		--blt-e-success-border: var(--success-border, color-mix(in oklch, var(--blt-e-success) 35%, transparent));
		--blt-e-danger-bg: var(--danger-bg, color-mix(in oklch, var(--blt-e-danger) 8%, transparent));
		--blt-e-danger-border: var(--danger-border, color-mix(in oklch, var(--blt-e-danger) 35%, transparent));
		--blt-e-warning-bg: var(--warning-bg, color-mix(in oklch, var(--blt-e-warning) 8%, transparent));
		--blt-e-warning-border: var(--warning-border, color-mix(in oklch, var(--blt-e-warning) 35%, transparent));
	}
}