/* ==========================================================================
   CultiWise design system – tokens
   Primitives and semantic aliases extracted from the Figma "CultiWise 2.0
   web system". Reusable on every page; components must bind to the semantic
   layer, never to a primitive.
   ========================================================================== */

:root {
	/* --- primitives: brand lime ------------------------------------------ */
	--cw-primary-50: rgb(247, 246, 243);
	--cw-primary-100: rgb(247, 252, 224);
	--cw-primary-200: rgb(237, 251, 162);
	--cw-primary-300: rgb(226, 251, 100);
	--cw-primary-500: rgb(195, 229, 48);
	--cw-primary-600: rgb(173, 203, 43);
	--cw-primary-700: rgb(151, 178, 38);

	/* --- primitives: green-tinted neutrals ------------------------------- */
	--cw-neutral-0: rgb(255, 255, 255);
	--cw-neutral-50: rgb(245, 246, 246);
	--cw-neutral-100: rgb(234, 237, 237);
	--cw-neutral-150: rgb(223, 227, 227);
	--cw-neutral-200: rgb(205, 212, 212);
	--cw-neutral-300: rgb(173, 182, 182);
	--cw-neutral-400: rgb(140, 151, 151);
	--cw-neutral-500: rgb(110, 123, 123);
	--cw-neutral-600: rgb(85, 98, 97);
	--cw-neutral-700: rgb(62, 75, 74);
	--cw-neutral-750: rgb(51, 64, 63);
	--cw-neutral-900: rgb(30, 46, 47);

	/* --- primitives: status ---------------------------------------------- */
	--cw-success-500: rgb(35, 154, 82);
	--cw-ring: rgb(151, 107, 232);

	/* --- semantic: surface ------------------------------------------------ */
	--cw-bg-default: var(--cw-neutral-0);
	--cw-bg-primary: var(--cw-neutral-50);
	--cw-bg-tertiary: var(--cw-neutral-150);
	--cw-bg-inverse: var(--cw-neutral-900);
	--cw-bg-accent: var(--cw-primary-300);

	/* --- semantic: text -------------------------------------------------- */
	--cw-fg-primary: var(--cw-neutral-900);
	--cw-fg-secondary: var(--cw-neutral-700);
	--cw-fg-tertiary: var(--cw-neutral-600);
	--cw-fg-muted: var(--cw-neutral-400);
	--cw-fg-inverse: var(--cw-neutral-0);
	--cw-fg-on-accent: var(--cw-neutral-900);

	/* --- semantic: border ------------------------------------------------ */
	--cw-border-default: var(--cw-neutral-150);
	--cw-border-strong: var(--cw-neutral-300);
	--cw-border-accent: var(--cw-primary-600);
	--cw-border-inverse: rgba(255, 255, 255, 0.12);

	/* --- accent states --------------------------------------------------- */
	--cw-accent-primary: var(--cw-primary-300);
	--cw-accent-hover: var(--cw-primary-500);
	--cw-accent-pressed: var(--cw-primary-600);

	/* --- spacing (4px base) ---------------------------------------------- */
	--cw-space-1: 4px;
	--cw-space-2: 8px;
	--cw-space-3: 12px;
	--cw-space-4: 16px;
	--cw-space-5: 20px;
	--cw-space-6: 24px;
	--cw-space-8: 32px;
	--cw-space-10: 40px;
	--cw-space-12: 48px;
	--cw-space-14: 56px;
	--cw-space-16: 64px;
	--cw-space-20: 80px;
	--cw-space-30: 120px;

	/* --- radius ----------------------------------------------------------- */
	--cw-radius-xs: 4px;
	--cw-radius-sm: 8px;
	--cw-radius-md: 12px;
	--cw-radius-lg: 16px;
	--cw-radius-pill: 999px;

	/* --- border width ----------------------------------------------------- */
	--cw-border-hairline: 1px;
	--cw-border-thick: 2px;
	--cw-border-focus: 3px;

	/* --- elevation -------------------------------------------------------- */
	--cw-shadow-card: 0 8px 24px rgba(30, 46, 47, 0.08);

	/* --- type ------------------------------------------------------------- */
	--cw-font-display: Gilroy, Montserrat, "Helvetica Neue", Arial, sans-serif;
	--cw-font-body: Gilroy, Montserrat, "Helvetica Neue", Arial, sans-serif;
	--cw-weight-regular: 400;
	--cw-weight-semibold: 600;
	--cw-weight-bold: 700;
	--cw-weight-extrabold: 800;
	--cw-weight-black: 900;

	/* --- layout ----------------------------------------------------------- */
	--cw-container: 1200px;
	--cw-container-gutter: var(--cw-space-30);
	--cw-transition: 150ms ease;
}

@media (max-width: 1024px) {
	:root {
		--cw-container-gutter: var(--cw-space-10);
		--cw-space-30: 80px;
		--cw-space-20: 56px;
	}
}

@media (max-width: 680px) {
	:root {
		--cw-container-gutter: var(--cw-space-5);
		--cw-space-30: 56px;
		--cw-space-20: 40px;
	}
}