/*
 * Slotforge token system.
 *
 * Layer A — base variables. Defaults below are the `neon` skin; per-site
 * values are injected as an inline `html:root{}` block from theme_mods
 * (see inc/helpers.php:slotforge_root_css) and win by specificity.
 *
 * Layer B — derived tokens. Never edited per site. Hex values in the first
 * :root block are the Safari <16.2 fallback (neon constants); the @supports
 * block overrides them with color-mix() recipes. The fallback must live
 * outside @supports: custom property declarations are not syntax-checked at
 * parse time, so a same-rule "fallback line above" would never apply.
 */

:root {
	/* Layer A defaults (neon) */
	--sf-accent: #8b5cf6;
	--sf-accent2: #22d3ee;
	--sf-surface: #12101a;
	--sf-text: #f2f0fa;
	--sf-on-accent: #ffffff;
	--sf-radius: 10px;
	--sf-container: 1200px;
	--sf-font-heading: 'Manrope', ui-sans-serif, system-ui, sans-serif;
	--sf-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

	/* Layer B fallbacks (precomputed in oklab from the neon defaults) */
	--sf-accent-hover: #714ac9;
	--sf-accent-active: #5b3ba4;
	--sf-accent-tint: #1f1a32;
	--sf-accent2-tint: #1b2531;
	--sf-surface-raised: #211f29;
	--sf-surface-sunken: #110f18;
	--sf-border: #2f2d38;
	--sf-border-strong: #4c4a55;
	--sf-text-muted: #9896a1;
	--sf-link: var(--sf-accent);
	--sf-link-hover: var(--sf-accent-hover);
	--sf-focus-ring: #b99ff8;

	/* Chrome colors — overridable per site from General settings; defaults
	   derive from the skin. */
	--sf-header-bg: var(--sf-surface-raised);
	--sf-footer-bg: var(--sf-surface-sunken);
	/* Hero block fill (behind the two-column hero). A per-page hero image,
	   when set, still wins over this color. */
	--sf-hero-bg: var(--sf-surface);

	/* Catfish sticky bar — its own dark chrome, overridable in General
	   settings. Accent = the highlighted bonus amounts. */
	--sf-catfish-bg: var(--sf-surface-sunken);
	--sf-catfish-text: var(--sf-text);
	--sf-catfish-accent: var(--sf-accent);
	--sf-catfish-btn: var(--sf-accent);
	--sf-catfish-btn-text: var(--sf-on-accent);

	/* Gradient background end-stop. Fallback = surface: old engines get a
	   flat, skin-correct background instead of a wrong-hue gradient. */
	--sf-bg-grad: var(--sf-surface);

	/* Fixed semantics: pros/cons, notices. Hue constant on every skin. */
	--sf-success: #22c55e;
	--sf-danger: #ef4444;
	--sf-warn: #f59e0b;
	--sf-success-tint: #1a2625;
	--sf-danger-tint: #2d1921;
	--sf-warn-tint: #2c2221;
}

@supports (color: color-mix(in oklab, #000, #fff)) {
	:root {
		--sf-accent-hover: color-mix(in oklab, var(--sf-accent) 86%, black);
		--sf-accent-active: color-mix(in oklab, var(--sf-accent) 74%, black);
		--sf-accent-tint: color-mix(in oklab, var(--sf-accent) 13%, var(--sf-surface));
		--sf-accent2-tint: color-mix(in oklab, var(--sf-accent2) 13%, var(--sf-surface));
		--sf-surface-raised: color-mix(in oklab, var(--sf-surface) 92%, white);
		--sf-surface-sunken: color-mix(in oklab, var(--sf-surface) 94%, black);
		--sf-border: color-mix(in oklab, var(--sf-text) 16%, var(--sf-surface));
		--sf-border-strong: color-mix(in oklab, var(--sf-text) 30%, var(--sf-surface));
		--sf-text-muted: color-mix(in oklab, var(--sf-text) 64%, var(--sf-surface));
		/* Anchored to text, not transparency: text already guarantees contrast
		   with surface on any skin, so the ring stays >=3:1 (WCAG 2.2 non-text). */
		--sf-focus-ring: color-mix(in oklab, var(--sf-accent) 55%, var(--sf-text));
		--sf-success-tint: color-mix(in oklab, var(--sf-success) 14%, var(--sf-surface));
		--sf-danger-tint: color-mix(in oklab, var(--sf-danger) 14%, var(--sf-surface));
		--sf-warn-tint: color-mix(in oklab, var(--sf-warn) 14%, var(--sf-surface));
		--sf-bg-grad: color-mix(in oklab, var(--sf-accent) 8%, var(--sf-surface));
	}
}