/*
 * FLEXD — design tokens
 * ---------------------------------------------------------------------------
 * Generated from the Figma `FLEXD` variable collection
 * (file lPrhtXH39DhzDfCjuo98YR — VariableCollectionId:9:2), Light mode.
 * 37 colour roles · 7 shape · 11 spacing.
 *
 * LIGHT ONLY. Dark mode was dropped 2026-09-08 (docs/DECISIONS.md #13) — this
 * is a storefront, and one canvas keeps the editorial art direction exact.
 * There is deliberately no `prefers-color-scheme` block: the site renders the
 * same for every visitor. Do not reintroduce dark overrides.
 *
 * Do not hand-edit colour values — re-export from Figma. Role names are kept in
 * M3 form so the Figma <-> CSS mapping stays 1:1.
 */

:root {
	color-scheme: light;

	/* --- Primary. #AFFF2D is the ONLY accent colour in the system. --------- */
	--color-primary: #afff2d;
	--color-on-primary: #0a1200;
	--color-primary-container: #cdf1a8;
	--color-on-primary-container: #132001;
	--color-inverse-primary: #a4db63;

	/* --- Secondary / Tertiary: generated by the M3 ramp, NOT used by the ---
	   editorial layer. Available as fallback only; do not introduce olive or
	   teal UI without a decision (DESIGN_SYSTEM.md 1.2). ------------------- */
	--color-secondary: #546541;
	--color-on-secondary: #ffffff;
	--color-secondary-container: #dde6d4;
	--color-on-secondary-container: #171e11;
	--color-tertiary: #116c68;
	--color-on-tertiary: #ffffff;
	--color-tertiary-container: #c1ede9;
	--color-on-tertiary-container: #03211f;

	/* --- Error ------------------------------------------------------------ */
	--color-error: #ac1e1b;
	--color-on-error: #ffffff;
	--color-error-container: #fdd9d3;
	--color-on-error-container: #390504;

	/* --- Surfaces ("paper") ----------------------------------------------- */
	--color-background: #fcfcfc;
	--color-on-background: #1b1c1a;
	--color-surface: #fcfcfc;
	--color-on-surface: #1b1c1a;
	--color-surface-variant: #e1e3df;
	--color-on-surface-variant: #444841;
	--color-surface-dim: #d9dad8;
	--color-surface-bright: #f9f9f9;
	--color-surface-container-lowest: #ffffff;
	--color-surface-container-low: #f3f4f3;
	--color-surface-container: #edeeed;
	--color-surface-container-high: #e8e8e7;
	--color-surface-container-highest: #e2e3e1;

	/* --- Lines + the black bands (masthead, footer, inverted sections) ----- */
	--color-outline: #74796f;
	--color-outline-variant: #c4c8c1;
	--color-inverse-surface: #30312f;
	--color-inverse-on-surface: #f0f1f0;

	--color-surface-tint: #afff2d;
	--color-scrim: #000000;
	--color-shadow: #000000;

	/* --- Shape. Editorial rule: only `none` and `full` are ever used. ------
	   The 4/8/12/16/28 steps exist because M3 stock components ship with them;
	   bespoke UI must not use them (CLAUDE.md rule 3). --------------------- */
	--radius-none: 0px;
	--radius-extra-small: 4px;
	--radius-small: 8px;
	--radius-medium: 12px;
	--radius-large: 16px;
	--radius-extra-large: 28px;
	--radius-full: 9999px;

	/* --- Spacing ---------------------------------------------------------- */
	--space-0: 0px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 56px;
	--space-10: 64px;

	/* --- Type families ---------------------------------------------------- */
	--font-display: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-text: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* --- Layout gutters (editorial, outside the token scale) --------------- */
	--gutter: 20px;
	--max-content: 1440px;
}

@media (min-width: 1024px) {
	:root {
		--gutter: 96px;
	}
}