/**
 * SleekPress front-end grammar — the tokens every public-facing component of
 * the suite shares (booking widget, course player, notices…).
 *
 * TWO RULES, and they are why this file exists:
 *
 * 1. **Nothing here touches `:root`.** The theme owns `:root`; a site's own
 *    design tokens (--space-*, --font-*, --radius-*) must never collide with
 *    ours. Components opt in by carrying the `sp-fe` class.
 *
 * 2. **Structure is ours and fixed; skin defers to the theme.** Internal
 *    spacing and sizes must not follow the site's page rhythm — a fluid
 *    clamp() that is right for a hero is wrong inside a compact widget. But
 *    colour and typeface SHOULD follow, so a component looks native without
 *    depending on anything: every theme variable is read with a fallback, so
 *    a non-Blocksy theme (or none) still renders correctly.
 *
 * Blocksy palette mapping (Customizer → Colors):
 *   1 primary accent · 2 hover/alt · 3 body text · 4 headings ·
 *   5 borders · 6 subtle background · 7 site background · 8 lighter alt
 * NEVER use 5/6/7 for text — they are borders and backgrounds; using them for
 * type is how light-on-light happens.
 */

.sp-fe {
	/* --- Spacing: the 8px grid, deliberately NOT fluid ------------------- */
	--sp-space-1: 0.25rem;
	--sp-space-2: 0.5rem;
	--sp-space-3: 0.75rem;
	--sp-space-4: 1rem;
	--sp-space-5: 1.5rem;
	--sp-space-6: 2rem;

	/* --- Radius & shadow ------------------------------------------------ */
	--sp-radius-s: 0.25rem;
	--sp-radius-m: 0.5rem;
	--sp-radius-l: 0.75rem;
	--sp-radius-full: 999px;
	--sp-shadow-s: 0 1px 2px rgb(16 24 40 / 5%);
	--sp-shadow-m: 0 4px 12px rgb(16 24 40 / 8%);

	/* --- Type: steps only; the family comes from the theme -------------- */
	--sp-text-xs: 0.75rem;
	--sp-text-sm: 0.8125rem;
	--sp-text-base: 0.875rem;
	--sp-text-md: 1rem;
	--sp-text-lg: 1.125rem;
	--sp-text-xl: 1.5rem;
	--sp-font-headings: var(--font-headings, inherit);

	/* --- Colour: the theme's, with a working fallback ------------------- */
	--sp-accent: var(--theme-palette-color-1, #111827);
	--sp-accent-hover: var(--theme-palette-color-2, var(--sp-accent));
	--sp-accent-text: #fff;
	--sp-accent-soft: color-mix(in srgb, var(--sp-accent) 12%, #fff);
	--sp-text: var(--theme-palette-color-3, #1f2937);
	--sp-heading: var(--theme-palette-color-4, #111827);
	/* No palette slot is "muted text": deriving from the body colour keeps
	   contrast honest, where borrowing the border colour would not. */
	--sp-muted: color-mix(in srgb, var(--sp-text) 65%, transparent);
	--sp-border-color: var(--theme-palette-color-5, #e6e8eb);
	--sp-surface: var(--theme-palette-color-7, #fff);
	--sp-surface-2: var(--theme-palette-color-6, #f7f5f2);
	--sp-surface-3: var(--theme-palette-color-8, var(--sp-surface-2));
	--sp-disabled: color-mix(in srgb, var(--sp-text) 35%, transparent);
	--sp-available: #16a34a;
	--sp-danger: #b32d2e;

	--sp-border: 1px solid var(--sp-border-color);
}