/*
 * Frencheezy design system tokens (docs/DESIGN_SYSTEM.md). The one place where design values are written.
 * Every --fz-* name points at the theme presets of the site being viewed (main, kids or exams), so components
 * never ask which site they are on. Components, apps and modules use these names only, never raw values.
 */
:root {
	/* colour */
	--fz-bg: var(--wp--preset--color--base);
	--fz-surface: var(--wp--preset--color--surface);
	--fz-surface-soft: var(--wp--preset--color--soft);
	--fz-ink: var(--wp--preset--color--ink);
	--fz-muted: var(--wp--preset--color--muted);
	--fz-line: var(--wp--preset--color--line);
	--fz-action: var(--wp--preset--color--primary);
	--fz-action-strong: var(--wp--preset--color--primary-dark);
	--fz-action-soft: #EEEEFC;
	--fz-on-action: #FFFFFF;
	--fz-spotlight: var(--wp--preset--color--accent);
	--fz-on-spotlight: var(--wp--preset--color--ink);
	--fz-night: var(--wp--preset--color--night);
	--fz-on-night: var(--wp--preset--color--on-night);
	--fz-success: var(--wp--preset--color--success);
	--fz-success-soft: #E4F8EF;
	--fz-warning: #8A5F00;
	--fz-warning-soft: #FFF4E5;
	--fz-danger: #B42318;
	--fz-danger-soft: #FDECEC;
	--fz-coral: var(--wp--preset--color--accent-2);
	--fz-mint: var(--wp--preset--color--accent-3);
	--fz-sky: var(--wp--preset--color--accent-4);
	--fz-scrim: rgba(30, 27, 58, .5);

	/* type */
	--fz-font-heading: var(--wp--preset--font-family--heading);
	--fz-font-body: var(--wp--preset--font-family--body);
	--fz-heading-weight: 600;
	--fz-body-weight: 400;

	/* space */
	--fz-space-10: var(--wp--preset--spacing--10);
	--fz-space-20: var(--wp--preset--spacing--20);
	--fz-space-30: var(--wp--preset--spacing--30);
	--fz-space-40: var(--wp--preset--spacing--40);
	--fz-space-50: var(--wp--preset--spacing--50);
	--fz-space-60: var(--wp--preset--spacing--60);
	--fz-space-70: var(--wp--preset--spacing--70);
	--fz-space-80: var(--wp--preset--spacing--80);

	/* shape */
	--fz-radius-sm: var(--wp--custom--radius--sm);
	--fz-radius-md: var(--wp--custom--radius--md);
	--fz-radius-lg: var(--wp--custom--radius--lg);
	--fz-radius-pill: var(--wp--custom--radius--pill);
	--fz-radius-btn: 10px;
	--fz-border: var(--wp--custom--border--width);
	--fz-shadow-soft: var(--wp--preset--shadow--soft);
	--fz-shadow-lift: var(--wp--preset--shadow--lift);
	--fz-shadow-sticker: var(--wp--preset--shadow--sticker);
	--fz-ease: var(--wp--custom--motion--ease);
	--fz-icon-stroke: 1.75;
}

body.fz-look-kids {
	--fz-body-weight: 600;
	--fz-icon-stroke: 2.5;
	--fz-radius-btn: 999px;
	--fz-scrim: rgba(35, 33, 74, .5);
}

/* On exams the theme's accent-2 is green and accent-3 sky: keep the decoration names steady. */
body.fz-look-exams {
	--fz-heading-weight: 700;
	--fz-icon-stroke: 2;
	--fz-coral: #FF6B5B;
	--fz-mint: var(--wp--preset--color--accent-2);
	--fz-sky: var(--wp--preset--color--accent-3);
	--fz-scrim: rgba(20, 33, 61, .5);
}