/*
 * Sensability — Layer 2 semantic tokens.
 * Maps the theme.json palette (--wp--preset--*) onto semantic --sb-* names.
 * Components in main.css reference --sb-* only.
 */
:root{
	--sb-green: var(--wp--preset--color--primary);
	--sb-green-dark: var(--wp--preset--color--primary-dark);
	--sb-green-light: var(--wp--preset--color--primary-light);
	--sb-blue: var(--wp--preset--color--accent);
	--sb-ink: var(--wp--preset--color--ink);
	--sb-muted: var(--wp--preset--color--muted);
	--sb-bg: var(--wp--preset--color--base);
	--sb-bg-soft: var(--wp--preset--color--soft);
	--sb-line: var(--wp--preset--color--line);

	--sb-font-head: var(--wp--preset--font-family--heading);
	--sb-font-body: var(--wp--preset--font-family--body);
	--sb-brand-grad: var(--wp--preset--gradient--brand);
	/* wide gradient: left half = orange→green, right half = green→blue.
	   Buttons show the right half by default and slide to the left half on hover. */
	--sb-btn-grad: linear-gradient(90deg, #f0a500 0%, var(--sb-green) 50%, var(--sb-blue) 100%);
	/* soft yellow → green, for the photo-card outline buttons on hover */
	--sb-btn-grad-soft: linear-gradient(90deg, #f4c81e 0%, #8cc63f 50%, var(--sb-green) 100%);

	--sb-radius: 16px;
	--sb-radius-sm: 10px;
	--sb-wrap: 1180px;
}