/*
 * Design tokens — the single source of truth for colour, type, radius and shadow.
 *
 * Ported VERBATIM from the design prototype (design/src/c-styles.css): same
 * variable names, same values. Keeping the names identical makes porting each
 * section's CSS mechanical and lets the theme be diffed against the design.
 *
 * Never hardcode a colour, radius or font in a template or section stylesheet.
 * Use var(--…) so a token change updates the whole site.
 */

:root {
	/* --- Brand ------------------------------------------------------------ */
	--nb: #00A75D;
	--nb-2: #009E54;
	--nb-3: #007C42;
	--nb-soft: #E6F5EC;
	--nb-warm: #FFF8EC;

	/* --- Accents ---------------------------------------------------------- */
	--warm-1: #F4763A;
	--warm-2: #FFB347;
	--berry: #C8447B;
	--cream: #FBF7EE;

	/* --- Ink, surfaces, lines --------------------------------------------- */
	--ink: #111613;
	--ink-2: #2A2F2C;
	--mute: #6B6F6E;
	--mute-2: #9B9F9E;
	--line: #ECE9E2;
	--line-2: #F4F2EC;
	--bg: #FBF8F1;
	--card: #FFFFFF;

	/* --- Status ----------------------------------------------------------- */
	--warn: #C97A0A;
	--warn-bg: #FBF1DD;
	--danger: #D43A3A;

	/* --- Radius ----------------------------------------------------------- */
	--r: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 28px;

	/* --- Type ------------------------------------------------------------- */
	--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Fraunces', 'Plus Jakarta Sans', serif;
	--font-mono: 'Geist Mono', ui-monospace, monospace;

	/* --- Elevation -------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(20, 25, 22, .05);
	--shadow: 0 8px 24px rgba(20, 25, 22, .08);
	--shadow-lg: 0 20px 60px rgba(20, 25, 22, .16);
	--shadow-pill: 0 4px 14px rgba(0, 167, 93, .32);

	/* --- Layout ----------------------------------------------------------
	 * Not in the prototype's :root — derived from its container rules.
	 * Keep --container in sync with $content_width in inc/setup.php.
	 */
	--container: 1200px;
	--gutter: 24px;

	/* --- Interaction ------------------------------------------------------
	 * Defined once and reused so motion isn't re-derived per component.
	 */
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--transition: var(--duration-base) var(--ease);
}