/* Auto-generated by Figma Token Sync — KHÔNG sửa tay file này, sẽ bị ghi đè khi Apply lại */
/* Desktop = giá trị gốc từ Figma. Tablet/Mobile do plugin tự scale (xem FTS_Scale::RULES). */

:root {

	/* Colors */
	--color-text-mediumem: #64656a;
	--color-text-lowem: #92949c;
	--color-text-reversed: #ffffff;
	--color-text-alpha-80: rgba(255, 255, 255, 0.8);
	--color-text-alpha-60: rgba(255, 255, 255, 0.6);
	--color-text-error: #b01c1c;
	--color-text-success: #059649;
	--color-text-orange-branding: #ff8200;
	--color-text-red-branding: #8a1538;
	--color-text-primary: #1c1f2a;
	--color-background-light-orange: #eeead7;
	--color-background-grey: #faf8f5;
	--color-background-hover: #f2f0ed;
	--color-background-pressed: #dedcd9;
	--color-background-disabled: #faf8f5;
	--color-background-orange: #ff8200;
	--color-background-red: #8a1538;
	--color-background-green: #005844;
	--color-background-be: #f5f0e9;
	--color-background-white: #ffffff;
	--color-background-deep-blue: #1c1f2a;
	--color-border-solid: #dedcd9;
	--color-border-transparent-white: rgba(255, 255, 255, 0.24);
	--color-border-transparent-dark: rgba(29, 31, 30, 0.24);
	--color-border-disabled: #f2f0ed;

	/* Font Family */
	--font-family-manrope: Manrope;

	/* Spacing */
	--space-0: 2px;
	--space-2: 2px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-96: 96px;
	--space-118: 118px;

	/* Radius */
	--radius-2: 2px;
	--radius-4: 4px;
	--radius-8: 8px;
	--radius-12: 12px;
	--radius-16: 16px;
	--radius-24: 24px;
	--radius-32: 32px;
	--radius-full: 1000px;
}

/* ================= tablet (≤ 1024px) ================= */
@media (max-width: 1024px) {
	:root {
		--space-6: 4px;
		--space-8: 6px;
		--space-10: 8px;
		--space-12: 10px;
		--space-16: 12px;
		--space-20: 16px;
		--space-24: 18px;
		--space-28: 22px;
		--space-32: 24px;
		--space-40: 30px;
		--space-48: 36px;
		--space-64: 48px;
		--space-96: 72px;
		--space-118: 88px;
		--radius-8: 6px;
		--radius-12: 10px;
		--radius-16: 14px;
		--radius-24: 20px;
		--radius-32: 28px;
	}
	body {
		--space-6: 4px;
		--space-8: 6px;
		--space-10: 8px;
		--space-12: 10px;
		--space-16: 12px;
		--space-20: 16px;
		--space-24: 18px;
		--space-28: 22px;
		--space-32: 24px;
		--space-40: 30px;
		--space-48: 36px;
		--space-64: 48px;
		--space-96: 72px;
		--space-118: 88px;
		--radius-8: 6px;
		--radius-12: 10px;
		--radius-16: 14px;
		--radius-24: 20px;
		--radius-32: 28px;
	}
}

/* ================= mobile (≤ 767px) ================= */
@media (max-width: 767px) {
	:root {
		--space-4: 2px;
		--space-6: 4px;
		--space-8: 4px;
		--space-10: 6px;
		--space-12: 8px;
		--space-16: 10px;
		--space-20: 12px;
		--space-24: 14px;
		--space-28: 16px;
		--space-32: 20px;
		--space-40: 24px;
		--space-48: 28px;
		--space-64: 38px;
		--space-96: 58px;
		--space-118: 70px;
		--radius-8: 6px;
		--radius-12: 10px;
		--radius-16: 12px;
		--radius-24: 18px;
		--radius-32: 24px;
	}
	body {
		--space-4: 2px;
		--space-6: 4px;
		--space-8: 4px;
		--space-10: 6px;
		--space-12: 8px;
		--space-16: 10px;
		--space-20: 12px;
		--space-24: 14px;
		--space-28: 16px;
		--space-32: 20px;
		--space-40: 24px;
		--space-48: 28px;
		--space-64: 38px;
		--space-96: 58px;
		--space-118: 70px;
		--radius-8: 6px;
		--radius-12: 10px;
		--radius-16: 12px;
		--radius-24: 18px;
		--radius-32: 24px;
	}
}