@layer reset, base, components, utilities, site, states;

@layer base {
	:root {
		color-scheme: light;

		--font-sans: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
		--text-primary: #252b26;
		--text-secondary: #626a63;
		--text-inverse: #fff;
		--surface: #fff;
		--surface-soft: #f7f5ef;
		--surface-muted: #ebe8de;
		--border-soft: #dfddd3;
		--brand-primary: #b4cf50;
		--brand-primary-hover: #93ac34;
		--brand-primary-contrast: #20270f;
		--brand-text: #53671d;
		--brand-secondary: #29322b;
		--brand-secondary-hover: #182019;
		--brand-accent: #d7b98a;
		--brand-accent-contrast: #2c2418;
		--brand-accent-text: #765222;
		--brand-ink: #29322b;
		--success: #3f7149;
		--danger: #b84232;
		--danger-contrast: #fff;
		--warning: #745813;
		--warning-surface: #e6bd55;
		--warning-contrast: #29210f;
		--focus-ring: #53671d;
		--radius-sm: 0.55rem;
		--radius-md: 0.9rem;
		--radius-lg: 1.35rem;
		--shadow-sm: 0 0.2rem 0.8rem rgb(41 50 43 / 7%);
		--shadow-md: 0 0.8rem 2.5rem rgb(41 50 43 / 11%);
		--shadow-lg: 0 1.4rem 4rem rgb(41 50 43 / 16%);
		--content-width: 90rem;
		--header-height: 5.5rem;

		/* TOKENS BASE DE COMPONENTES */
		--color0-1: #29322b;
		--color0-2: #667069;
		--color0-3: #dfddd3;
		--color0-4: #fbfaf6;
		--color0-5: #f1eee6;
		--color0-6: #9a9e96;
		--color1-1: var(--brand-primary);
		--color1-2: var(--brand-secondary);
		--color1-3: var(--brand-accent);
		--color1-4: #f4f7e9;
		--color1-5: #e8efcd;
		--color3-1: #c5d48a;
		--color5-1: var(--danger);
		--color6-1: var(--warning-surface);
	}
}