/**
 * Lemon — Design tokens.
 * Fuente única de colores, tipografías, spacing, radios y sombras para los
 * widgets del plugin. Referencia: lemon-web-main/src/app/globals.css.
 */

:root {
	/* Marca */
	--lemon: #7dc443;
	--lemon-dark: #4a8a1f;
	--lemon-light: #ebf7dc;
	--lemon-pale: #f4fae9;

	/* Neutros sobre claro */
	--ink: #0e0e10;
	--ink-2: #27272a;
	--ink-3: #52525b;
	--ink-4: #a1a1aa;
	--bone: #fafaf8;
	--bone-2: #f2f2ef;
	--border: #e4e4e0;

	/* Superficies oscuras */
	--dark-bg: #0a0a0a;
	--dark-surface: #141414;
	--dark-surface-2: #1c1c1c;
	--dark-surface-3: #222222;

	/* Semánticos */
	--whatsapp: #25d366;
	--info: #1d4ed8;
	--danger: #dc2626;

	/* Tipografías */
	--font-display: "Syne", sans-serif;
	--font-body: "DM Sans", sans-serif;

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

	/* Radios */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-full: 9999px;

	/* Sombras */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18);
	--shadow-wa: 0 4px 16px rgba(37, 211, 102, 0.4);
	--shadow-green: 0 4px 20px rgba(125, 196, 67, 0.25);
}